/* You can add global styles to this file, and also import other style files */

$primary: #198754;
$enable-shadows: true;
$color-mode-type: media-query;

/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap';

:root {
  --card-color: #{$green-500};
  --navbar-bg-color: #{$green-400};
  --navbar-border-bottom-color: #{$green-800};
  --navbar-text-color: white;
  --navbar-muted-color: $gray-400;
}

.bg-primary {
  background-color: var(--navbar-bg-color) !important;
  color: var(--navbar-text-color) !important;
  .text-muted {
    color: var(--navbar-muted-color) !important;
  }
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  height: 1.8rem;
}

.card-border  {
  aspect-ratio: 64 / 89;
  height: 100px;
  outline: 3px var(--card-color) solid;
  outline-offset: -3px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $body-bg;
  transition: transform 200ms ease-in-out, background-color 100ms ease-in, outline-color 100ms ease-in;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  &:not(.card-disabled, .dashed) {
    box-shadow: 0 0 15px 0 $gray-400;
  }

  @include color-mode(dark) {
    background-color: $gray-800;
    color: white;
    &:not(.card-disabled, .dashed) {
      box-shadow: 0 0 15px 0 $gray-800;
    }
  }
}

.card-value {
  font-size: xx-large;
  user-select: none;
}

.card-disabled {
  background: $gray-200;
  outline-color: $gray-600;
  color: $gray-700;
  @include color-mode(dark) {
    background: $gray-800;
    color: $gray-600;
  }
}

.svh-100 {
  height: 100vh;
  height: 100svh;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
