/*
 * PaymentCard component
 *
 */

@import '../../../style/core/utilities.scss';
@import '../../../style/themes/theme-sbanken/properties.scss';

.dnb-payment-card {
  --color-dark-cyan: #003b47;
  --dnb-payment-bg-default: linear-gradient(
    187.2deg,
    #008484 6.31%,
    var(--color-sea-green) 82.66%
  );
  --dnb-payment-bg-pluss: linear-gradient(
      187.2deg,
      var(--color-dark-cyan) 6.31%,
      var(--color-ocean-green) 82.66%
    ),
    var(--color-emerald-green);
  --dnb-payment-bg-white: linear-gradient(
    184.55deg,
    var(--color-black-background) 4.63%,
    var(--color-white) 92.04%
  );
  --dnb-payment-bg-gold: linear-gradient(
    184.55deg,
    #bfa970 4.63%,
    #d3bd83 84.57%
  );
  --dnb-payment-bg-saga: linear-gradient(
    187.2deg,
    #1c1c1c 6.31%,
    #000 82.66%
  );
  --dnb-payment-bg-private: linear-gradient(
    187.2deg,
    #1c1c1c 6.31%,
    #000 82.66%
  );
  --dnb-payment-bg-business-no-visa: linear-gradient(
      187.2deg,
      var(--color-dark-cyan) 6.31%,
      var(--color-ocean-green) 82.66%
    ),
    var(--color-emerald-green);
  --dnb-payment-bg-business-with-visa: linear-gradient(
      187.2deg,
      var(--color-dark-cyan) 6.31%,
      var(--color-ocean-green) 82.66%
    ),
    var(--color-emerald-green);

  margin: 0;

  &__card {
    position: relative;
    width: 343px;
    height: 216px;
    padding: 16px;

    border-radius: 12px;

    border: 1px solid;
    border-color: rgb(255 255 255 / 10%) transparent rgb(255 255 255 / 10%)
      transparent;

    color: var(--color-white);
    box-shadow: var(--shadow-default);

    transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

    &--design-default {
      background: var(--dnb-payment-bg-default);
      color: var(--color-white);
    }

    &--design-pluss {
      background: var(--dnb-payment-bg-pluss);
      color: var(--color-white);
    }

    &--design-ung {
      color: var(--color-black-80);
    }

    &--design-youth {
      color: var(--color-black-80);
    }

    &--design-my-first {
      color: var(--color-black-80);
    }

    &--design-gold {
      background: var(--dnb-payment-bg-gold);
      color: var(--color-white);
    }

    &--design-saga {
      background: var(--dnb-payment-bg-saga);
      color: var(--color-white);
    }

    &--design-private {
      background: var(--dnb-payment-bg-private);
      color: var(--color-white);
    }

    &--design-black {
      background: var(--color-black);
      color: var(--color-white);
    }

    &--design-business-no-visa {
      background: var(--dnb-payment-bg-business-no-visa);
      color: var(--color-white);
    }

    &--design-business-with-visa {
      background: var(--dnb-payment-bg-business-with-visa);
      color: var(--color-white);
    }

    &--design-sbanken-mastercard {
      background: var(--sb-color-purple);
      color: var(--color-white);
    }

    &--design-sbanken-visa {
      background: var(--color-white);
      color: var(--sb-color-text);
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background: radial-gradient(
        52.39% 52.39% at 50% 50%,
        #f7f6e61f 0%,
        #06060600 100%
      );
      border-radius: inherit;
    }

    &--design-sbanken-mastercard::after {
      background: none;
    }

    &__content {
      display: flex;
      height: 100%;
      width: 100%;
      position: relative;
    }

    &__wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
    }

    // In case of .dnb-spacing usage
    .dnb-spacing & .dnb-p {
      margin-bottom: 0 !important;
    }

    &__holder {
      font-weight: var(--font-weight-medium);
      text-transform: uppercase;
      text-align: left;
      // opacity: 0.5;

      &.dnb-p {
        font-size: 0.625rem;
      }
    }

    &__numbers {
      font-size: 1.5rem !important;
      font-weight: var(--font-weight-medium);
    }

    &__credit-type {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    &__bank-logo {
      position: absolute;
      top: 0;
      left: 0;
    }

    &__product-type {
      height: 38px;
      position: absolute;
      top: 0;
      left: 70px;
    }

    &__bank-axept {
      height: 45px;
      position: absolute;
      top: 0;
      right: 0;
    }

    &__credit {
      position: absolute;
      top: 6px;
      right: 0;
    }
  }

  &__blocking {
    &__overlay {
      svg path {
        stroke: currentcolor;
      }

      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      display: flex;
      justify-content: center;
      align-items: center;

      background: linear-gradient(
        184.55deg,
        rgb(204 204 204 / 50%) 4.63%,
        rgb(232 232 232 / 50%) 84.83%
      );
    }

    &__center {
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      background: var(--color-black-80);
      color: var(--color-sand-yellow);
      border-radius: 4px;
    }

    svg {
      shape-rendering: geometricprecision;
    }
  }

  &.dnb-skeleton &__card__holder {
    opacity: 1;
  }

  &--compact &__card {
    padding: 0;
    height: 32.8mm;

    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-default);

    &__top {
      position: absolute;
      top: 4mm;
      left: 6mm;
      right: 6mm;
    }

    &__bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      height: 14mm;

      background-color: var(--color-white);
    }

    &__wrapper {
      padding: 6px 22px;
      color: var(--color-black-80);
    }

    &__numbers {
      font-size: var(--font-size-basis);
    }

    &__credit-type {
      top: 10px;
      right: 4px;
      bottom: auto;
    }
  }

  &--compact &__blocking {
    &__center {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;

      height: 100%;
      width: 100%;
      gap: var(--spacing-x-small);

      background: rgb(0 0 0 / 73.9%);
      border-radius: inherit;
    }
  }
}