// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:list";
@import "./card-variables";

.#{$ns}-card {
  background-color: $card-background-color;
  border-radius: $pt-border-radius;
  box-shadow: $pt-elevation-shadow-0;
  padding: $card-padding;
  transition:
    transform ($pt-transition-duration * 2) $pt-transition-ease,
    box-shadow ($pt-transition-duration * 2) $pt-transition-ease;

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    background-color: $dark-card-background-color;
    box-shadow: $pt-dark-elevation-shadow-0;
  }

  // High contrast mode hides box-shadows, so we need to use a border instead
  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    border: 1px solid $pt-high-contrast-mode-border-color;
    box-shadow: none;
  }
}

@for $index from 1 through list.length($elevation-shadows) {
  .#{$ns}-elevation-#{$index - 1} {
    box-shadow: list.nth($elevation-shadows, $index);

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      box-shadow: list.nth($dark-elevation-shadows, $index);
    }

    @media (forced-colors: active) and (prefers-color-scheme: dark) {
      border: 1px solid $pt-high-contrast-mode-border-color;
    }
  }
}

.#{$ns}-card.#{$ns}-compact {
  padding: $card-padding-compact;
}

.#{$ns}-card.#{$ns}-interactive {
  &:hover {
    box-shadow: $pt-elevation-shadow-3;
    cursor: pointer;

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      box-shadow: $pt-dark-elevation-shadow-3;
    }
  }

  &.#{$ns}-selected {
    box-shadow:
      0 0 0 3px rgba($blue4, 0.2),
      0 0 0 1px $blue4;

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      box-shadow:
        0 0 0 3px rgba($blue5, 0.4),
        0 0 0 1px $blue5;
    }
  }

  &:active {
    box-shadow: $pt-elevation-shadow-1;
    transition-duration: 0;

    &.#{$ns}-dark,
    .#{$ns}-dark & {
      box-shadow: $pt-dark-elevation-shadow-1;
    }
  }
}