.cobalt- {
  // deprecated
  $legacy-card-padding-tight: 12px;

  &Card {
    @apply c-bg-secondary c-border c-border-base c-rounded-xl;
    width: 100%;

    &--legacy {
      border: 0;

      @apply c-shadow;
    }

    &--responsive {
      @include breakpoint($until: sm) {
        border-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
      }
    }
  }

  &Card__Section {
    @apply c-bg-secondary;
    position: relative;

    display: block;
    padding: $card-padding;
  }

  &Card__Section--subdued {
    @apply c-bg-neutralAlt;
  }

  &Card__Section + &Card__Section--divided {
    @apply c-border-t c-border-subdued;
    padding-top: $card-padding - 1px;
  }

  &Card__Section + &Card__Section--dividedSoft {
    &:before {
      @apply c-bg-neutral;

      position: absolute;
      top: 0;
      right: 0;

      display: block;
      height: 1px;
      width: calc(100% - #{$card-padding});

      content: "";
    }
  }

  &Card__Section--tabBar {
    padding: 0;
  }

  &Card__Section--tight {
    padding: $legacy-card-padding-tight $card-padding;
  }

  &Card__Section--divided.cobalt-Card__Section--tight {
    padding-top: $legacy-card-padding-tight - 1px;
  }

  // first-of-class, source: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
  &Card
    > .cobalt-Card__Section:not(.cobalt-Card__Section ~ .cobalt-Card__Section) {
    @apply c-rounded-t-xl;
  }

  // No last-of-class hack found for now
  &Card > .cobalt-Card__Section:last-of-type {
    @apply c-rounded-b-xl;
  }
}

a.cobalt-Card__Section[href] {
  z-index: theme("zIndex.base");

  text-decoration: inherit;

  transition: 150ms ease-out;

  &:hover {
    z-index: theme("zIndex.above");

    @apply c-shadow;

    transform: scale(1.01);
  }
}