/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
form {
  .form-field {
    display       : flex;
    flex-direction: column;
    max-width     : 24rem;

    &.required label::after {
      content: "*";
      color  : var(--color-decrypto-red);
    }
  }

  .form-controls {
    display   : flex;
    margin-top: 1rem;
  }

  > :nth-child(n+2 of .form-field) {
    margin-top: 1rem;
  }

  .field_with_errors {
    display       : flex;
    flex-direction: column;
    padding-left  : 0.5rem;
    border-left   : 4px solid var(--color-decrypto-red);
  }

  input[type=submit],
  button {
    padding         : 0.5rem;
    border-radius   : 0.5rem;
    background-color: var(--color-decrypto-blue);
    color           : var(--color-white);

    &:hover {
      background-color: var(--color-decrypto-blue-600);
    }
  }

  :is([type=text], input:where(:not([type])), [type=email], [type=url], [type=password], [type=number], [type=date], [type=datetime-local], [type=month], [type=search], [type=tel], [type=time], [type=week], [multiple], textarea, select):focus {
    --tw-ring-color: var(--color-decrypto-blue);
  }
}

.flash {
  &.alert {
    background-color: var(--color-decrypto-red);
  }

  &.notice {
    background-color: var(--color-decrypto-blue-400);
  }
}