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

.container {
  .inputWrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    max-width: var(--select-max-width, $select-max-width);
    width: var(--select-max-width, $select-max-width);

    input {
      grid-column: 1/2;
      color: var(--input-color, $input-color);
      border: 1px solid var(--input-border-color, $input-border-color);
      padding: 0 48px 0 12px;
      display: inline-block;
      font-size: var(--label-font-size, $label-font-size);
      outline: none;
      height: 50px;
      width: 100%;
      transition: box-shadow 0.15s ease-in-out 0s;

      &::placeholder {
        color: var(--input-placeholder-color, $input-placeholder-color);
      }

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

      &:disabled {
        background-color: var(
          --input-disabled-background-color,
          $input-disabled-background-color
        );
        color: var(--input-disabled-font-color, $input-disabled-font-color);
        border-color: var(
          --input-disabled-border-color,
          $input-disabled-border-color
        );
      }

      &:hover:enabled,
      &:focus {
        border-color: var(--input-hover-color, $input-hover-color);
        box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);

        &.hasError {
          border-color: var(
            --input-invalid-border-color,
            $input-invalid-border-color
          );
          box-shadow: 0 0 0 2px
            var(--input-invalid-hover-color, $input-invalid-hover-color);
        }

        &:disabled {
          border-color: var(
            --input-disabled-border-color,
            $input-disabled-border-color
          );
          box-shadow: none;
        }
      }
    }

    .button {
      grid-column: 2/3;
      margin-left: -50px;
      svg {
        height: 50%;
        * {
          stroke: var(
            --popper-trigger-button-color,
            $popper-trigger-button-color
          );
        }
      }

      &:disabled {
        svg * {
          stroke: var(
            --select-disabled-arrow-color,
            $select-disabled-arrow-color
          );
        }
      }
    }
  }
}

.popperContent {
  ul {
    display: grid;
    row-gap: 1px;
    background-color: white;
    padding: 0px;
    margin-top: 1px;
    margin-bottom: 1px;
    border: 1px solid var(--popper-border-color, $popper-border-color);
    overflow-y: auto;
    max-height: 509px;

    li {
      display: grid;
      place-items: center left;
      height: 40px;
      font-size: var(--popper-item-font-size, $popper-item-font-size);
      color: var(--popper-text-color, $popper-text-color);
      background-color: white;
      padding: 0 12px;
      list-style: none;
      cursor: default;

      &:hover {
        cursor: pointer;
        background-color: var(
          --popper-item-hover-color,
          $popper-item-hover-color
        );
      }

      &[aria-selected='true'] {
        background-color: var(
          --popper-background-selected-color,
          $popper-background-selected-color
        );
      }
      &[class='Mui-focused Mui-focusVisible'] {
        background-color: var(
          --popper-item-selected-color,
          $popper-item-selected-color
        );
      }
    }
  }
}
