/* @define Card */

.np-Card {
  --Card-background-color: var(--color-background-neutral);
  --Card-border-radius: var(--size-32);
  --Card-flex-gap: var(--size-16);
  --Card-padding: var(--size-24);
  --Card-closeButton-position: var(--size-16);
  --Card-max-width: initial;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--Card-background-color);
  border-radius: var(--Card-border-radius);
  gap: var(--Card-flex-gap);
  padding: var(--Card-padding);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;

  @media (--screen-sm) {
    max-width: var(--Card-max-width);
  }

  &.is-disabled {
    .np-Card-closeButton {
      cursor: not-allowed;
    }
  }

  .np-theme-personal--dark & {
    --Card-background-color: var(--color-background-elevated);
  }

  &-closeButton {
    position: absolute;
    z-index: 100;
    top: var(--Card-closeButton-position);
    right: var(--Card-closeButton-position);

    [dir="rtl"] & {
      left: var(--Card-closeButton-position);
      right: auto;
    }
  }

  &--small {
    --Card-border-radius: var(--size-16);
    --Card-closeButton-position: var(--size-8);
    --Card-padding: var(--size-16);
  }
}