@use './colors';
@use './typography';

@mixin search-text-field {
  .seam-search-text-field {
    svg {
      * {
        fill: colors.$text-gray-2;
      }
    }
  }
}

@mixin text-field {
  .seam-text-field {
    > .seam-main {
      background: colors.$white;
      border: 1px solid colors.$text-gray-3;
      border-radius: 8px;
      display: flex;
      padding: 0 8px;
      align-items: center;

      &:hover {
        border-color: colors.$text-default;
      }

      &:focus-within {
        border-color: colors.$primary;
      }
    }

    .seam-text-field-input {
      height: 40px;
      border: 0;
      width: 100%;
      border-radius: 8px;
      font-size: 16px;

      @include typography.font-family;

      &:focus {
        outline: none;
      }
    }

    .seam-adornment {
      display: flex;
      align-items: center;

      svg {
        font-size: 22px;
      }

      &.seam-start {
        margin-right: 4px;
      }

      button {
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        appearance: none;
        background-color: transparent;
        padding: 0;
        margin: 0;
        border: 0;
        box-shadow: none;
        border-radius: 4px;
        cursor: pointer;

        &:hover {
          background-color: colors.$bg-b;
        }

        &.seam-hidden {
          opacity: 0;
          visibility: hidden;
        }
      }
    }

    > .seam-helper-text {
      margin-top: 4px;
    }

    &.seam-disabled {
      > .seam-main {
        border-color: colors.$text-gray-3;
        background: colors.$bg-gray;
        cursor: not-allowed;

        > .seam-text-field-input {
          cursor: not-allowed;
        }
      }
    }

    &.seam-large {
      > .seam-main {
        padding: 0 12px;

        > .seam-text-field-input {
          height: 48px;
        }
      }
    }

    &.seam-error {
      > .seam-main {
        border: 1px solid colors.$status-red;
      }

      > .seam-helper-text {
        color: colors.$status-red;
      }
    }
  }
}

@mixin all {
  @include text-field;
  @include search-text-field;
}