/**
 * This file declares all the v4 variables and styles (that
 * can be used as public API) using tailwind utilities
 * configured in v5 to maintain backwards compatability.
*/
:root {
  --borderWidth-thin: theme(borderWidth.DEFAULT);
  --borderWidth-thick: theme(borderWidth.4);
  --fontFamily-monospace: 'Noto Mono', monospace;
  --fontFamily-sansSerif: 'Noto Sans', sans-serif;
  --fontFamily-serif: 'Noto Serif', serif;
  --fontSize-xs: theme(fontSize.xs[0]);
  --fontSize-s: theme(fontSize.sm[0]);
  --fontSize-m: theme(fontSize.md[0]);
  --fontSize-l: theme(fontSize.lg[0]);
  --fontSize-xl: theme(fontSize.xl[0]);
  --fontSize-xxl: 1.875rem;
  --gap-xs: theme(spacing.1);
  --gap-s: theme(spacing.2);
  --gap-m: theme(spacing.3);
  --gap-l: theme(spacing.4);
  --gap-xl: theme(spacing.7);
  --iconSize-xs: theme(iconSize.xs);
  --iconSize-s: theme(iconSize.sm);
  --iconSize-m: theme(iconSize.md);
  --iconSize-l: theme(iconSize.lg);
  --iconSize-xl: theme(iconSize.xl);
  --lineHeight-xs: theme(fontSize.xs[1]);
  --lineHeight-s: theme(fontSize.sm[1]);
  --lineHeight-m: theme(fontSize.md[1]);
  --lineHeight-l: theme(fontSize.lg[1]);
  --lineHeight-xl: theme(fontSize.xl[1]);
  --lineHeight-xxl: 2.75rem;
  --shadow-1: theme(boxShadow.xs);
  --shadow-2: theme(boxShadow.sm);
  --shadow-3: theme(boxShadow.md);
  --shadow-4: theme(boxShadow.lg);
  --time-xs: theme(transitionDuration.150);
  --time-s: theme(transitionDuration.200);
  --time-m: theme(transitionDuration.300);
  --time-l: theme(transitionDuration.500);
  --time-xl: theme(transitionDuration.1000);

  /* Cubic: https://easings.net/ */
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-outBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --icon-size: var(--iconSize-l);

  --Input-borderColor: theme(colors.gray.300);
  --Input-focusBackground: unset;
  --Input-focusColor: theme(colors.primary.600);
  --Input-placeholderColor: theme(colors.gray.500);

  --Link-color: theme(colors.primary.600);
  --Link-hoverColor: theme(colors.primary.800);
  --Link-decoration: underline;

  --RPB-size: var(--gap-xl);

  --Text-height: theme(fontSize.md.1);

  /* v4 theme colors mapped to v5 theme */
  --color-red1: theme(colors.error.50);
  --color-red2: theme(colors.error.200);
  --color-red3: theme(colors.error.300);
  --color-red4: theme(colors.error.400);
  --color-red5: theme(colors.error.500);
  --color-red6: theme(colors.error.500);
  --color-red7: theme(colors.error.800);
  --color-orange1: theme(colors.warning.50);
  --color-orange2: theme(colors.warning.200);
  --color-orange3: theme(colors.warning.300);
  --color-orange4: theme(colors.warning.400);
  --color-orange5: theme(colors.warning.500);
  --color-orange6: theme(colors.warning.500);
  --color-orange7: theme(colors.warning.800);
  --color-dominant1: theme(colors.primary.50);
  --color-dominant2: theme(colors.primary.200);
  --color-dominant3: theme(colors.primary.300);
  --color-dominant4: theme(colors.primary.400);
  --color-dominant5: theme(colors.primary.500);
  --color-dominant6: theme(colors.primary.500);
  --color-dominant7: theme(colors.primary.800);
  --color-blue1: theme(colors.primary.50);
  --color-blue2: theme(colors.primary.200);
  --color-blue3: theme(colors.primary.300);
  --color-blue4: theme(colors.primary.400);
  --color-blue5: theme(colors.primary.500);
  --color-blue6: theme(colors.primary.500);
  --color-blue7: theme(colors.primary.800);
  --color-yellow1: theme(colors.warning.50);
  --color-yellow2: theme(colors.warning.200);
  --color-yellow3: theme(colors.warning.300);
  --color-yellow4: theme(colors.warning.400);
  --color-yellow5: theme(colors.warning.500);
  --color-yellow6: theme(colors.warning.500);
  --color-yellow7: theme(colors.warning.800);
  --color-purple1: theme(colors.purple.50);
  --color-purple2: theme(colors.purple.200);
  --color-purple3: theme(colors.purple.300);
  --color-purple4: theme(colors.purple.400);
  --color-purple5: theme(colors.purple.500);
  --color-purple6: theme(colors.purple.500);
  --color-purple7: theme(colors.purple.800);
  --color-green1: theme(colors.success.50);
  --color-green2: theme(colors.success.200);
  --color-green3: theme(colors.success.300);
  --color-green4: theme(colors.success.400);
  --color-green5: theme(colors.success.500);
  --color-green6: theme(colors.success.500);
  --color-green7: theme(colors.success.800);
  --color-gray1: theme(colors.gray.50);
  --color-gray2: theme(colors.gray.200);
  --color-gray3: theme(colors.gray.300);
  --color-gray4: theme(colors.gray.400);
  --color-gray5: theme(colors.gray.500);
  --color-gray6: theme(colors.gray.200);
  --color-gray7: theme(colors.gray.800);
}

.Text.is-xs {
  --Text-height: theme(fontSize.xs.1);

  @apply text-xs;
}

.Text.is-s {
  --Text-height: theme(fontSize.sm.1);

  @apply text-sm;
}

.Text.is-m {
  --Text-height: theme(fontSize.md.1);

  @apply text-md;
}

.Text.is-l {
  --Text-height: theme(fontSize.lg.1);

  @apply text-lg;
}

.Text.is-xl {
  --Text-height: theme(fontSize.xl.1);

  @apply text-xl;
}

.Text.is-xxl {
  --Text-height: var(--lineHeight-xxl);

  font-size: var(--fontSize-xxl);
  line-height: var(--lineHeight-xxl);
}

/* v4 Icon styles */
.Icon {
  @apply btu-icon rotate-[var(--icon-transform)];
}

.Icon.is-s {
  @apply btu-icon-sm;
}

.Icon.is-m {
  @apply btu-icon-md;
}

.Icon.is-l {
  @apply btu-icon-lg;
}

.Icon.is-xl {
  @apply btu-icon-xl;
}

[data-icon-mode='rotate90'] {
  --icon-transform: rotate(90deg);
}

[data-icon-mode='rotate180'] {
  --icon-transform: rotate(180deg);
}

[data-icon-mode='rotate270'] {
  --icon-transform: rotate(270deg);
}

/* v4 Button & IconButton styles */
.Button {
  @apply btu-button;
  .is-submitting &.is-clicked {
    @apply pointer-events-none;

    &:not(.Link) {
      @apply btu-button-disabled before:btu-loader before:blokk before:size-[1.2rem];
    }
  }
}

.Button.is-dominant {
  @apply btu-button-primary;
}

.Button.is-green {
  @apply btu-button-success;
}

.Button.is-yellow {
  @apply btu-button-warning;
}

.IconButton {
  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon;
}

.IconButton.is-focus {
  @apply btu-button-pressed;
}

.IconButton.no-Fill {
  @apply btu-button-fill-none;
}

.IconButton.is-pin {
  --IconButton-name: 'push_pin';

  @apply btu-button-gray;
}

/* This class is used to style "off" or default states with a color gray and not for disabled states as the name
suggests. Example use case "pin" icon button in live blog posts */
.IconButton.is-disabled {
  @apply btu-button-gray;
}

.IconButton.is-red {
  @apply btu-button-error;
}

.IconButton.is-black,
.IconButton.is-white {
  @apply btu-button-gray;
}

.Label:is(.is-green) {
  @apply btu-badge-success;
}

.Label:is(.is-orange, .is-yellow) {
  @apply btu-badge-warning;
}

.Label:is(.is-red) {
  @apply btu-badge-error;
}

/* v4 Link styles */
.Link:where(
    .is-dominant,
    .is-white,
    .is-black,
    .is-red,
    .is-orange,
    .is-yellow,
    .is-green,
    .is-gray,
    .is-purple
  ) {
  /* By default --Link-decoration is underline except for these cases */
  --Link-decoration: none;
}

.Link.is-dominant {
  --Link-color: theme(colors.primary.600);
  --Link-hoverColor: theme(colors.primary.800);

  @apply text-primary-600 hover:text-primary-800;
}

.Link.is-blue {
  --Link-color: theme(colors.primary.600);
  --Link-hoverColor: theme(colors.primary.800);

  @apply text-primary-600 hover:text-primary-800;
}

.Link.is-white {
  --Link-color: theme(colors.white.DEFAULT);
  --Link-hoverColor: theme(colors.white.DEFAULT);

  @apply text-white hover:text-white;
}

.Link.is-black {
  --Link-color: theme(colors.black.DEFAULT);
  --Link-hoverColor: theme(colors.black.DEFAULT);

  @apply text-black hover:text-black;
}

.Link.is-red {
  --Link-color: theme(colors.error.700);
  --Link-hoverColor: theme(colors.error.800);

  @apply text-error-700 hover:text-error-800;
}

.Link.is-orange {
  --Link-color: theme(colors.warning.500);
  --Link-hoverColor: theme(colors.warning.600);

  @apply text-warning-500 hover:text-warning-600;
}

.Link.is-yellow {
  --Link-color: theme(colors.warning.700);
  --Link-hoverColor: theme(colors.warning.700);

  @apply text-warning-700;
}

.Link.is-green {
  --Link-color: theme(colors.success.600);
  --Link-hoverColor: theme(colors.success.800);

  @apply text-success-600 hover:text-success-800;
}

.Link.is-gray {
  --Link-color: theme(colors.gray.700);
  --Link-hoverColor: theme(colors.gray.900);

  @apply text-gray-700 hover:text-gray-900;
}

.Link.is-purple {
  --Link-color: theme(colors.purple.600);
  --Link-hoverColor: theme(colors.purple.800);

  @apply text-purple-600 hover:text-purple-800;
}

.Link.is-active {
  text-decoration: var(--Link-hoverDecoration, underline);
  @apply text-[var(--Link-hoverColor)];
}

.Checkbox.is-toggle {
  @apply Checkbox-toggle;
}

/*
  The fallback icon when we don't have a mapping to Lucide.
  This is the case where a project needs to intervene.
*/
[data-icon-name],
[data-icon] {
  &::before {
    @apply [--tw-content:var(--compat-icon)];
  }
}

/* ClosableWindow.less compat */
.ButtonForClosableWindow {
  @apply cursor-pointer;
}

/* ScheduledEvents widget compat */
.scheduledEvents-controls {
  .icon-action-search {
    @apply before:btu-icon-calendar-search;
  }
}

/* v4 things which shouldn't appear in v5 */
.v4-only {
  @apply hidden;
}
