/*
Component represents a input.
Use:
  <input class="top-input size-md">
  <div class="top-input-container">
    <input class="top-input size-md">
    <span class="top-input-validation-mark"></span>
  </div>
*/

@use '../mixins/styles.scss';
@use '../mixins/flex.scss';

.top-input-container {
  position: relative;
  width: max-content;

  .top-input {
    width: 100%;

    &:invalid + .top-input-validation-mark {
      display: none;
    }
  }

  .top-input-validation-mark {
    width: 24px;
    height: 24px;

    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);

    display: block;

    &::after {
      content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.25L9.75 18L21.75 6' stroke='%2326DE70' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    }
  }
}
.top-input {
  width: 100%;
  max-width: 400px;

  position: relative;

  padding: var(--unit-2) var(--unit-4);

  text-align: left;

  outline: none;

  transition: var(--transition);
  transition-property: border-color;

  border-width: 2px;
  border-style: solid;

  background: transparent;

  // Styles
  &.style-light {
    border-color: var(--color-black-supermuted);
    color: var(--color-black-text);

    &:hover {
      border-color: var(--color-black-muted);
    }
    &:focus {
      border-color: var(--color-secondary);
    }
    &::placeholder {
      color: var(--color-grey);
    }
  }
  &.style-dark {
    border-color: var(--color-white-supermuted);
    color: var(--color-white-text);

    &:hover {
      border-color: var(--color-white-muted);
    }
    &:focus {
      border-color: var(--color-secondary);
    }
    &::placeholder {
      color: var(--color-grey);
    }
  }

  // Sizes
  &.size-md {
    padding: var(--unit-3) var(--unit-4);

    font-size: var(--font-size-4);

    &::placeholder {
      font-size: var(--font-size-3);
    }
  }
  &.size-lg {
    height: 64px;
    padding: var(--unit-5);

    font-size: var(--font-size-4);

    &::placeholder {
      font-size: var(--font-size-4);
    }
  }
}