@import "./primitives";
@import "./tokens";
@import "./datatable";
@import "./card";
@import "./buttons";
@import "./typography";

@mixin cygnus-reach-globals() {
  @include cygnus-reach-primitives();
  @include cygnus-reach-tokens();
  @include cygnus-reach-datatable();
  @include cygnus-reach-card();
  @include cygnus-reach-buttons();
  @include cygnus-reach-typography();

  .elev-1 {
    box-shadow: 0 0 var(--spacing-xs) 0px
      var(--color-neutral-dark-transparent-10);
  }

  .elev-3 {
    box-shadow: 0px var(--spacing-micro) var(--spacing-sm) 0px
      var(--color-neutral-dark-transparent-14);
  }

  .elev-5 {
    box-shadow: 0px var(--spacing-xs) var(--spacing-md) 0px
      var(--color-neutral-dark-transparent-14);
  }

  .elev-7 {
    box-shadow: 0px var(--spacing-sm) var(--spacing-lg) 0px
      var(--color-neutral-dark-transparent-20);
  }

  input,
  textarea {
    background: var(--surface-primary);
    color: var(--text-primary);
    border: var(--spacing-micro) solid var(--border-primary);
    border-radius: var(--border-radius-sm);

    &::placeholder {
      color: var(--text-disabled);
    }

    &:disabled {
      color: var(--text-disabled);
      background: var(--surface-disabled);
    }

    &:focus {
      border-color: var(--border-brand);
    }

    &:focus-visible {
      border-color: var(--border-brand);
      outline: none;
    }

    &:hover {
      box-shadow: none;
    }

    &.ng-invalid:not(.ng-untouched, .ng-pristine, :placeholder-shown) {
      border: var(--spacing-micro) solid var(--border-error);
      background: var(--surface-errorLight);
      box-shadow: none;
      &:hover {
        box-shadow: none;
      }
    }
  }
}