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

.container {
  .tagsWrapper {
    display: flex;
    flex-flow: wrap;
    gap: 10px;

    .selectedItem {
      width: max-content;
      display: grid;
      align-items: center;
      grid-template-columns: auto 50px;
      background-color: var(--tag-background-color, $tag-background-color);

      span {
        border: none;
        padding: 10px 5px 10px 15px;
        font-size: var(--label-font-size, $label-font-size);
        color: $tag-font-color;

        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.disabled span {
        color: var(--input-disabled-font-color, $input-disabled-font-color);
      }
    }

    .inputWrapper {
      display: flex;
      flex-direction: row-reverse;
      width: 320px;
      position: relative;

      input:disabled + .plusButton:disabled {
        background-color: var(
          --input-disabled-background-color,
          $input-disabled-background-color
        );
      }

      input {
        height: 50px;
        width: 100%;

        display: inline-block;
        outline: none;

        font-size: var(--label-font-size, $label-font-size);

        border: 1px solid var(--input-border-color, $input-border-color);
        transition: box-shadow 0.15s ease-in-out 0s;

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

          background-color: var(
            --input-disabled-background-color,
            $input-disabled-background-color
          );
        }

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

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

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

      input,
      .autoComplete > li {
        padding: 15px;
        color: var(--input-color, $input-color);
      }

      .autoComplete {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;

        box-sizing: border-box;
        padding: 0;

        position: absolute;
        top: 36px;
        left: 0;
        right: 0;

        list-style-type: none;
        z-index: 10;

        border: 1px solid
          var(--live-suggest-border-color, $live-suggest-border-color);
        background-color: #ffffff;

        li {
          color: var(--live-suggest-text-color, $live-suggest-text-color);
        }

        li:hover,
        li.selected {
          background-color: var(
            --live-suggest-background-selected-color,
            $live-suggest-background-selected-color
          );

          cursor: pointer;
        }
      }

      .plusButton {
        svg * {
          stroke: white;
        }

        background-color: var(
          --tag-plus-button-bg-color,
          $tag-plus-button-bg-color
        );
        position: absolute;
        right: 1px;
        top: 1px;
        height: 48px;
        width: 48px;

        transition: background-color 0.15s ease-in-out 0s;

        &:disabled,
        &.hasError {
          background-color: white;
          svg * {
            stroke: var(
              --custom-tags-disabled-button-stroke-color,
              $custom-tags-disabled-button-stroke-color
            );
          }
        }

        &:enabled {
          &:hover {
            border: 1px solid
              var(
                --tag-plus-button-hover-stroke-color,
                $tag-plus-button-hover-stroke-color
              );
            box-shadow: 0 0 0 2px
              var(
                --tag-plus-button-hover-stroke-color,
                $tag-plus-button-hover-stroke-color
              );

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

.customTagEnter {
  opacity: 0;
  background-color: var(--tag-enter-color, $tag-enter-color) !important;
}

.customTagEnterActive {
  opacity: 1;
  background-color: var(
    --tag-background-color,
    $tag-background-color
  ) !important;

  transition: background-color 1000ms ease-out 100ms, opacity 100ms ease-in;
}

.customTagExit {
  opacity: 1;
}
.customTagExitActive {
  opacity: 0;
  transition: opacity 50ms ease-out;
}
