@import 'tailwindcss';
@import './theme.css';

@layer base {
  html,
  body {
    @apply scheme-dark size-full bg-surface text-on-surface select-none overflow-hidden antialiased;
    &[data-scheme='dark'] {
      @apply scheme-dark;
    }
  }

  #root {
    @apply size-full overflow-hidden;
  }
}

@layer components {
  .workspace {
    @apply size-full overflow-hidden flex items-stretch gap-2 rounded-sm;
  }

  .normal_text {
    @apply text-sm/[1.2];
  }

  .caption {
    @apply text-sm/[1];
  }

  .small_caption {
    @apply text-[10px]/[1];
  }

  .title {
    @apply text-lg font-bold;
  }

  .heading {
    @apply text-2xl/[1.2] italic;
  }

  .label {
    @apply text-sm/[1.2] font-bold;
  }

  .navigate {
    @apply text-xs/[1];
  }

  button {
    @apply border-0 flex flex-row items-center justify-center gap-1 px-2 py-1;
    &:not(.outlined) {
      &.primary {
        @apply bg-primary hover:bg-primary-hover active:bg-primary-active text-on-primary disabled:bg-primary-disabled disabled:text-on-primary-disabled;
      }
      &.secondary {
        @apply bg-secondary hover:bg-secondary-hover active:bg-secondary-active text-on-secondary disabled:bg-secondary-disabled disabled:text-on-secondary-disabled;
      }
      &.tertiary {
        @apply bg-tertiary hover:bg-tertiary-hover active:bg-tertiary-active text-on-tertiary disabled:bg-tertiary-disabled disabled:text-on-tertiary-disabled;
      }
      &.accent {
        @apply bg-accent hover:bg-accent-hover active:bg-accent-active text-on-accent disabled:bg-accent-disabled disabled:text-on-accent-disabled;
      }
      &.danger {
        @apply bg-danger hover:bg-danger-hover active:bg-danger-active text-on-danger disabled:bg-danger-disabled disabled:text-on-danger-disabled;
      }
      &.success {
        @apply bg-success hover:bg-success-hover active:bg-success-active text-on-success disabled:bg-success-disabled disabled:text-on-success-disabled;
      }
      &.warn {
        @apply bg-warn hover:bg-warn-hover active:bg-warn-active text-on-warn disabled:bg-warn-disabled disabled:text-on-warn-disabled;
      }
      &.info {
        @apply bg-info hover:bg-info-hover active:bg-info-active text-on-info disabled:bg-info-disabled disabled:text-on-info-disabled;
      }
      &.progressive {
        @apply bg-progressive hover:bg-progressive-hover active:bg-progressive-active text-on-progressive disabled:bg-progressive-disabled disabled:text-on-progressive-disabled;
      }
      &.defensive {
        @apply bg-defensive hover:bg-defensive-hover active:bg-defensive-active text-on-defensive disabled:bg-defensive-disabled disabled:text-on-defensive-disabled;
      }
      &.neutral {
        @apply bg-neutral hover:bg-neutral-hover active:bg-neutral-active text-on-neutral disabled:bg-neutral-disabled disabled:text-on-neutral-disabled;
      }
    }
    &.outlined {
      @apply bg-transparent border;
      &.primary {
        @apply border-primary text-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active disabled:border-primary-disabled disabled:text-primary-disabled;
      }
      &.secondary {
        @apply border-secondary text-secondary hover:border-secondary-hover hover:text-secondary-hover active:border-secondary-active active:text-secondary-active disabled:border-secondary-disabled disabled:text-secondary-disabled;
      }
      &.tertiary {
        @apply border-tertiary text-tertiary hover:border-tertiary-hover hover:text-tertiary-hover active:border-tertiary-active active:text-tertiary-active disabled:border-tertiary-disabled disabled:text-tertiary-disabled;
      }
      &.accent {
        @apply border-accent text-accent hover:border-accent-hover hover:text-accent-hover active:border-accent-active active:text-accent-active disabled:border-accent-disabled disabled:text-accent-disabled;
      }
      &.danger {
        @apply border-danger text-danger hover:border-danger-hover hover:text-danger-hover active:border-danger-active active:text-danger-active disabled:border-danger-disabled disabled:text-danger-disabled;
      }
      &.success {
        @apply border-success text-success hover:border-success-hover hover:text-success-hover active:border-success-active active:text-success-active disabled:border-success-disabled disabled:text-success-disabled;
      }
      &.warn {
        @apply border-warn text-warn hover:border-warn-hover hover:text-warn-hover active:border-warn-active active:text-warn-active disabled:border-warn-disabled disabled:text-warn-disabled;
      }
      &.info {
        @apply border-info text-info hover:border-info-hover hover:text-info-hover active:border-info-active active:text-info-active disabled:border-info-disabled disabled:text-info-disabled;
      }
      &.progressive {
        @apply border-progressive text-progressive hover:border-progressive-hover hover:text-progressive-hover active:border-progressive-active active:text-progressive-active disabled:border-progressive-disabled disabled:text-progressive-disabled;
      }
      &.defensive {
        @apply border-defensive text-defensive hover:border-defensive-hover hover:text-defensive-hover active:border-defensive-active active:text-defensive-active disabled:border-defensive-disabled disabled:text-defensive-disabled;
      }
    }
  }
}