@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/mixins/_theming.less";
@import (reference) "./../styles/less/ring.less";

.np-card {
  overflow: hidden;
  transition-property: transform, box-shadow;
  transition-duration: 0.35s;
  transition-timing-function: ease;

  .media {
    border: 0;
  }

  &--expanded {
    background-color: var(--color-background-elevated);
    box-shadow: 0 1px 10px var(--color-border-neutral);

    .np-theme-personal & {
      box-shadow: 0 1px 10px 0 rgba(69, 71, 69, 0.2);
    }

    .remove-dark-themes-box-shadows();
  }

  &--inactive {
    .decision {
      cursor: default;
    }
  }

  &--has-icon {
    .np-card__content {
      @media (--screen-xs) {
        padding: var(--size-24) var(--size-72);
      }
    }

    .np-card__divider {
      @media (--screen-xs) {
        &--expanded {
          margin: 0 var(--size-72);
        }
      }
    }
  }

  &__button {
    background-color: transparent;
    .text-align(left);

    width: 100%;

    .np-theme-personal & {
      .focus-ring();
    }
  }

  &__content {
    padding: var(--size-24) var(--size-16);

    .np-theme-personal & {
      padding: var(--size-16) var(--size-16) var(--size-24);
    }
  }

  &__divider {
    transition: margin 0.35s ease;

    &--expanded {
      background-color: var(--color-border-neutral);
      height: 1px;
      margin: 0 var(--size-16);
    }
  }

  .np-theme-personal & {
    overflow: initial;
    border-radius: var(--radius-medium);

    &__divider {
      transition: none;
      margin: 0;
    }

    /* stylelint-disable-next-line no-duplicate-selectors */
    &__button {
      border-radius: var(--radius-medium);

      .focus-ring();
      .ring-inset();
    }

    /* stylelint-disable-next-line no-duplicate-selectors */
    &--expanded {
      .np-card__button {
        border-radius: var(--radius-medium) var(--radius-medium) 0 0;
      }
    }
  }
}