@use "../colors" as c;
@use "font-size";
@use "ilios-button";
@use "ilios-input";
@use "ilios-select";
@use "ilios-textarea";
@use "media";

@mixin ilios-form() {
  align-items: start;
  display: grid;
  grid-gap: 0.25rem 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;

  @include media.for-laptop-and-up {
    grid-template-columns: repeat(2, 1fr);
  }

  @include media.for-desktop-and-up {
    grid-template-columns: repeat(3, 1fr);
  }

  label {
    @include ilios-label;
  }

  #{ilios-input.$form-input-text-types} {
    @include ilios-input.ilios-input;
  }

  select {
    @include ilios-select.ilios-select;
  }

  textarea {
    @include ilios-textarea.ilios-textarea;
  }

  #{ilios-input.$form-input-text-types},
  textarea,
  select {
    display: block;
    width: 100%;
    @include media.for-tablet-and-up {
      min-width: 33%;
    }
  }
}

@mixin ilios-form-item() {
  @include ilios-form-error;
  display: flex;
  flex-direction: column;
  min-height: 4rem;
}

@mixin ilios-form-last-item() {
  display: block;
  grid-column: 1 / -1;
}

@mixin ilios-form-buttons() {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding: 0;

  button {
    @include ilios-button.ilios-button;
    border-style: solid;
    border-width: 1px;
    margin-right: 1rem;
    transition: all 0.08s linear;

    &:enabled:hover {
      color: c.$white;
    }

    &.done {
      background-color: c.$white;
      border-color: c.$fernGreen;
      color: c.$raisinBlack;

      &:enabled {
        &:hover,
        &:active,
        &.active {
          background-color: c.$fernGreen;
          color: c.$white;
        }
      }
    }

    &.cancel {
      background-color: c.$white;
      border-color: c.$crimson;
      color: c.$crimson;

      &:enabled:hover {
        background-color: c.$crimson;
      }
    }
  }
}

@mixin ilios-label() {
  font-weight: bold;

  .label-description {
    @include font-size.font-size("small");
    font-weight: normal;
  }
}

@mixin ilios-form-error {
  .validation-error-message {
    color: c.$crimson;
    @include font-size.font-size("small");
  }

  input {
    &.has-error {
      border-color: c.$crimson;
    }
  }
}
