@import './DashboardCardColors.less';

@keyframes card-glow-rotate {
  0%   { box-shadow:  3px  3px 14px -4px var(--card-glow); }
  25%  { box-shadow: -3px  3px 14px -4px var(--card-glow); }
  50%  { box-shadow: -3px -3px 14px -4px var(--card-glow); }
  75%  { box-shadow:  3px -3px 14px -4px var(--card-glow); }
  100% { box-shadow:  3px  3px 14px -4px var(--card-glow); }
}

.dashboard-card {
  width: 100%;
  height: 112px;
  border-radius: @radius-card !important;
  border: 1px solid @color-border !important;
  background-color: @color-surface !important;
  transition: box-shadow @transition-card;
  position: relative;
  overflow: visible;

  &__icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent, @color-gray-text);
  }

  &__title {
    color: rgba(148, 163, 184, 0.7) !important;
    font-size: @text-xs !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  &__content {
    width: 100%;
  }

  &__value {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--card-accent, @color-text);
  }

  &__desc {
    color: @color-faint !important;
    font-size: @text-xs;
  }

  &.blue {
    --card-accent: @color-blue-text;
    --card-glow: @color-blue-border;
    background-color: @color-blue-bg !important;
    border-color: @color-blue-border !important;
    animation: card-glow-rotate 8s linear infinite;
  }
  &.orange {
    --card-accent: @color-orange-text;
    --card-glow: @color-orange-border;
    background-color: @color-orange-bg !important;
    border-color: @color-orange-border !important;
    animation: card-glow-rotate 8s linear infinite;
  }
  &.green {
    --card-accent: @color-green-text;
    --card-glow: @color-green-border;
    background-color: @color-green-bg !important;
    border-color: @color-green-border !important;
    animation: card-glow-rotate 8s linear infinite;
  }
  &.purple {
    --card-accent: @color-purple-text;
    --card-glow: @color-purple-border;
    background-color: @color-purple-bg !important;
    border-color: @color-purple-border !important;
    animation: card-glow-rotate 8s linear infinite;
  }
  &.gray {
    --card-accent: @color-gray-text;
    --card-glow: @color-gray-border;
    background-color: @color-gray-bg !important;
    border-color: @color-gray-border !important;
    animation: card-glow-rotate 8s linear infinite;
  }
}