@import '~styles/mixins';

.FiltersForm {
  .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .filter {
      @include medium {
        margin-bottom: 10px;
      }
      .filter-item {
        border: solid 2px $color-grey;
        width: auto;
        border-radius: 50px;
        margin-right: 20px;

        .filter-selector {
          padding: 5px 20px;
          display: flex;
          align-items: center;
          .indic {
            @include ball(6px);
            background-color: $color_primary;
            margin-left: 8px;
          }
        }
        .filter-content {
          text-align: center;
          border: solid 2px $color-dark-grey;
          border-radius: 10px;
          width: auto;
          min-width: 300px;
          right: inherit;
          left: 0;
          display: grid;

          @include tablet {
            left: 50%;
            transform: translateX(-50%);
          }

          .title-content {
            padding: 15px;
            font-weight: 700;
          }
          .confirm {
            border-top: 1px solid $color_border;
            padding: 15px;
            text-align: right;
          }

          .indication {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            padding: 5px 1px;
            padding-top: 0;
          }

          .filter-sub-content {
            border-top: 1px solid $color_border;

            padding: 15px;
            width: 100%;
            &.flex {
              display: flex;
            }

            .filter-input {
              margin-top: 0;
              width: 50%;
            }
            .filter-full {
              margin-top: 0;
              width: 100%;
            }

            .filter-item {
              width: 100%;

              &.min {
                border-radius: 50px 0 0 50px;
                border-right-width: 0;
              }
              &.max {
                border-radius: 0 50px 50px 0;
              }

              .filter-content {
                min-width: 130px;
                border: 0;
                border-radius: 0;

                .value {
                  padding: 10px;
                  border-radius: 50px;
                  &:hover {
                    background-color: #ededed;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
