@import '../../../styles/common.scss';

$border: 1px solid var(--filter-border-color, $filter-border-color);
$input-active: 3px solid var(--input-hover-color, $input-hover-color);
$input-inactive: 1px solid var(--input-border-color, $input-border-color);

.container {
  @include boxSizing;

  background: var(--filter-background-color, $filter-background-color);

  cursor: pointer;

  input {
    border: $input-inactive;
  }

  &.hasValue {
    background: color-mix(
      in srgb,
      var(--filter-background-color, $filter-background-color) 50%,
      transparent
    );
  }

  .title {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 38px;
    place-content: space-between;
    place-items: center;
    color: var(--filter-title-color, $filter-title-color);
    font-size: var(--filter-font-size, $filter-font-size);
    border: 1px solid transparent;

    transition: border 0.15s ease-in-out 0s, background-color 100ms linear;

    &:hover {
      border: $border;
    }

    &.active {
      background-color: var(
        --filter-background-selected-color,
        $filter-background-selected-color
      );

      border: $border;
    }

    &.hasError {
      border: 1px solid
        var(--input-invalid-border-color, $input-invalid-border-color);
    }

    &.hasValue {
      font-weight: bold;
    }

    .button {
      height: 40px;
      width: 40px;

      &.rotated svg {
        transform: rotate(90deg);
      }

      svg {
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
      }

      svg * {
        stroke: var(
          --filter-context-button-color,
          $filter-context-button-color
        );
      }
    }

    label {
      padding-left: 15px;
    }
  }

  .selectedValue {
    color: var(--filter-light-font-color, $filter-light-font-color);
    font-size: var(--filter-font-size, $filter-font-size);
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    place-content: space-between;
    place-items: center;

    .button {
      height: 40px;
      width: 40px;
      transition: background-color 120ms linear, color 120ms linear;

      svg * {
        stroke: var(
          --filter-context-button-color,
          $filter-context-button-color
        );
      }

      &:hover {
        background-color: var(--input-hover-color, $input-hover-color);

        svg * {
          stroke: white; /* white foreground */
        }
      }
    }
    span {
      padding-left: 30px;
    }
  }
}

.contentContainer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);

  &.expanded {
    grid-template-rows: 1fr;
  }

  .content {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  .active {
    display: grid;
    overflow: hidden;

    border-right: $border;
    border-bottom: $border;
    border-left: $border;

    input:focus {
      border: $input-active;
    }
  }
}
