@import './variables';

.s-card {
  background-color: var(--theme-cards);
  color: var(--theme-text-primary);
  display: block;
  max-width: 100%;
  outline: none;
  text-decoration: none;
  transition-property: box-shadow, opacity;
  overflow-wrap: $card-overflow-wrap;
  position: relative;
  white-space: $card-white-space;

  &:not(.flat) {
    @include elevation($card-elevation);
  }

  &:not(.tile) {
    border-radius: $card-border-radius;
  }

  &.outlined {
    border: $card-outlined-border-width solid rgba(0, 0, 0, 0.12);
    @include elevation(0);
  }

  &.raised {
    @include elevation($card-raised-elevation);
  }

  &.shaped {
    border-radius: $card-shaped-border-radius;
  }

  &.hover {
    cursor: pointer;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    &:hover,
    &:focus {
      @include elevation($card-hover-elevation);
    }
  }

  &.link {
    cursor: pointer;

    .s-chip {
      cursor: pointer;
    }

    &::before {
      background: currentColor;
      bottom: 0;
      content: '';
      left: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
      transition: 0.2s opacity map-get($transitions, 'fast-in-slow-out');
    }

    &:focus::before {
      opacity: $card-link-focus-opacity;
    }
  }

  &.disabled {
    pointer-events: none;
    user-select: none;

    > *:not(.s-progress-linear) {
      opacity: $card-disabled-opacity;
      transition: inherit;
    }
  }

  > *:first-child:not(.s-btn):not(.s-chip),
  > [slot='progress'] + *:not(.s-btn):not(.s-chip) {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  > *:last-child:not(.s-btn):not(.s-chip) {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
}