@use 'variables';

@mixin light-theme {
  :root {
    @content;
  }
}

@mixin dark-theme {
  :root[data-night-mode="dark"] {
    @content;
  }

  @media screen and (prefers-color-scheme: dark) {
    :root[data-night-mode="auto"] {
      @content;
    }
  }
}

@mixin hidden {
  opacity: 0 !important;
  position: absolute !important;
  transform: scale(0, 0) !important;
  z-index: -1 !important;
}

@mixin tab-active {
  border-bottom-color: var(--primary);
}

@mixin discreet-tab-active {
  color: var(--text);
}

@mixin card($bg-rgb) {
  background-color: rgb($bg-rgb);

  @media screen and (min-width: variables.$desktop-min-width) {
    :root[data-night-mode="light"] & {
      background-color: rgba($bg-rgb, var(--setting-light-desktop-card-opacity, 1.0));
    }

    :root[data-night-mode="dark"] & {
      background-color: rgba($bg-rgb, var(--setting-dark-desktop-card-opacity, 1.0));
    }

    :root[data-night-mode="auto"] & {
      background-color: rgba($bg-rgb, var(--setting-light-desktop-card-opacity, 1.0));
    }
  }

  @media screen and (min-width: variables.$desktop-min-width) and (prefers-color-scheme: dark) {
    :root[data-night-mode="auto"] & {
      background-color: rgba($bg-rgb, var(--setting-dark-desktop-card-opacity, 1.0));
    }
  }
}