@import 'text';
@import 'animations';

textarea {
  @include normal-text();
  display: block;
  width: 100%;
  height: 150px;

  @media (max-width: $mobile-width) {
    height: 100px;
  }

  resize: none;

  box-sizing: border-box;
  border: none;
}

input[type='text'] {
  @include sub-title-text();
  width: 100%;
  background: transparent;

  display: block;
  border: 0;

  &::placeholder {
    color: inherit;
    opacity: 0.6;
  }

  &:focus {
    box-shadow: 0 1px $text-color;
  }
}

button {
  -webkit-appearance: none;

  margin: 8px auto 0 auto;
  user-select: none;

  background: transparent;
  border: 0;

  @include medium-text();
  font-size: var(--large-font-size);
  $height: 2px;
  cursor: pointer;
  border-bottom: solid $height #5d576b55;
  position: relative;

  &:disabled {
    color: #5d576b55;
    border-bottom: solid $height #5d576b33;
    cursor: not-allowed;
  }

  &:not(:disabled):hover {
    &:after {
      width: 100%;
    }
  }
  &:after {
    content: '';
    width: 0;
    height: $height;
    position: absolute;
    left: 0;
    bottom: calc(-1 * #{$height});
    background-color: $text-color;
    transition: width 300ms;
  }
}

label {
  display: none;
}