@use '../../../style/variables.scss';

.wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  width: 100%;
  max-width: 100%;

  .label {
    font-size: 0.875rem;
    line-height: 1.0625rem;
    font-weight: 500;
    color: variables.$lightgray-500;
  }

  .disabledLabel {
    color: variables.$gray-800;
  }

  .inputElementContainer {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    width: calc(100% - 30px);
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid variables.$purple-400;
    border-radius: 10px;
    background-color: rgba(50, 50, 50, 0.8);
    transition: all 0.3s;

    &:hover {
      cursor: pointer;
      transition: all 0.3s;
      background-color: variables.$darkgray-300;
      border-color: variables.$purple-500;

      svg {
        transition: all 0.3s;
        fill: variables.$gray-300;

        * {
          transition: all 0.3s;
          fill: variables.$gray-300;
        }
      }

      .inputElement {
        transition: all 0.3s;
        color: variables.$gray-300 !important;
      }
    }

    &:focus-within {
      transition: all 0.3s;
      border-color: variables.$purple-700;
      background-color: variables.$darkgray-300;

      svg {
        transition: all 0.3s;
        fill: variables.$white;

        * {
          transition: all 0.3s;
          fill: variables.$white;
        }
      }
    }

    &:active {
      transition: all 0.3s;
      border-color: variables.$purple-400;
      background-color: rgba(50, 50, 50, 0.8);

      svg {
        transition: all 0.3s;
        fill: variables.$white;

        * {
          transition: all 0.3s;
          fill: variables.$white;
        }
      }
    }

    .iconContainer {
      display: flex;
      min-width: 32px;
      min-height: 32px;
      align-items: center;
      justify-content: center;

      svg {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        transition: all 0.3s;

        fill: variables.$lightgray-200;

        * {
          transition: all 0.3s;
          fill: variables.$lightgray-200;
        }
      }
    }

    .subtext {
      display: flex;
      align-items: center;
      font-size: 1rem;
      line-height: 1.1875rem;
      font-weight: 400;
      color: variables.$white;
      transition: all 0.3s;
      min-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .inputElement {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: unset !important;
      padding: 0;
      border: unset !important;
      outline: unset !important;
      font-size: 1rem !important;
      line-height: 1.1875rem !important;
      font-weight: 400 !important;
      background: transparent !important;
      background-color: transparent !important;
      transition: all 0.3s;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      // Default color for inputs with value (not showing placeholder)
      color: variables.$white !important;

      // Gray color when placeholder is shown
      &::placeholder {
        color: variables.$lightgray-200 !important;
      }

      &:placeholder-shown {
        color: variables.$lightgray-200 !important;
      }

      &:focus,
      &:active {
        outline: unset;
        transition: all 0.3s;
        color: variables.$white !important;
      }

      &:disabled {
        transition: all 0.3s;
        color: variables.$gray-500 !important;
        cursor: not-allowed;
      }
    }
  }

  .disabledInputContainer {
    transition: all 0.3s;
    border-color: variables.$darkpurple;
    background-color: rgba(50, 50, 50, 0.8);

    &:hover,
    &:focus,
    &:active {
      transition: all 0.3s;
      cursor: not-allowed;
      border-color: variables.$darkpurple;
      background-color: rgba(50, 50, 50, 0.8);
    }

    svg {
      transition: all 0.3s;
      fill: variables.$gray-500;

      * {
        transition: all 0.3s;
        fill: variables.$gray-500;
      }
    }

    .subtext {
      transition: all 0.3s;
      color: variables.$gray-500;
    }
  }

  .erroredInputContainer {
    transition: all 0.3s;
    border-color: variables.$red-300;
    background-color: variables.$darkgray-300;

    svg {
      transition: all 0.3s;
      fill: variables.$white;

      * {
        transition: all 0.3s;
        fill: variables.$white;
      }
    }

    .inputElement {
      transition: all 0.3s;
      color: variables.$white;
    }
  }

  .successInputContainer {
    transition: all 0.3s;
    border-color: variables.$green-200;
    background-color: variables.$darkgray-300;

    svg {
      transition: all 0.3s;
      fill: variables.$white;

      * {
        transition: all 0.3s;
        fill: variables.$white;
      }
    }

    .inputElement {
      transition: all 0.3s;
      color: variables.$white;
    }
  }

  .errorMessage,
  .successMessage {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.0625rem;
    font-weight: 500;
  }

  .errorMessage {
    color: variables.$red-300;
  }

  .successMessage {
    color: variables.$green-200;
  }
}
