/*
 * PaymentCard component styles
 * This file provides styling for the PaymentCard component, including general design tokens
 * and variations for different card types (e.g., default, pluss, gold, etc.).
 */

@use '../../../style/themes/sbanken/properties.scss';

.dnb-payment-card {
  /*
   * Define custom CSS variables used throughout the PaymentCard component.
   * These variables allow for reusable colors, border-radius, and overlay background transitions.
   */
  --color-dark-cyan: #003b47;
  --dnb-payment-bg-default: var(--color-sea-green);
  --dnb-payment-bg-pluss: var(--color-ocean-green);
  --dnb-payment-bg-white: var(--color-white);
  --dnb-payment-bg-gold: #d8c583;
  --dnb-payment-bg-black-gold: #1f1b10;
  --dnb-payment-bg-black-grey: #1c1c1e;
  --dnb-payment-overlay-bg-dark: rgba(0 0 0 / 60%);
  --dnb-payment-overlay-bg-light: rgba(255 255 255 / 70%);
  --dnb-payment-border-radius: 12px;

  // General styles for the PaymentCard container
  margin: 0;
  border-radius: var(--dnb-payment-border-radius);

  /*
   * Base styles for the card element including size, padding, color, and shadow.
   * This serves as the core design for all PaymentCard variations.
   */
  &__card {
    width: 100%;
    height: 100%;
    padding: 16px;
    border-radius: inherit;

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

    transition:
      box-shadow 225ms cubic-bezier(0, 0, 0.2, 1) 0ms,
      opacity 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

    // Ensure the card content cannot be selected
    user-select: none;

    // Specific container wrapper for the card.
    &__wrapper {
      position: relative;
      width: 343px;
      height: 216px;
      border-radius: inherit;
      border: 1px solid var(--color-black-8);

      // Creates a transparent overlay to prevent user selection
      &::after {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }
    }

    // Styles for a card marked as: notActive | blocked | expired
    &--blocked {
      opacity: 0.5;
    }

    /*
     * Design variations for different card types.
     * Each modifier represents a unique card style and contains
     * specific background and text color configurations.
     */
    &--design {
      // Card styles for DNB default card designs
      &-default {
        background-color: var(--dnb-payment-bg-default);
        color: var(--color-white);
      }

      // Card styles for DNB Pluss card designs
      &-pluss {
        background-color: var(--dnb-payment-bg-pluss);
        color: var(--color-white);
      }

      // Card styles for youth-oriented card designs
      &-ung,
      &-youth,
      &-my-first {
        background-color: var(--dnb-payment-bg-white);
        color: var(--color-black);
      }

      // Gold card design
      &-gold {
        background-color: var(--dnb-payment-bg-gold);
        color: var(--color-black);
      }

      // Saga (Gold) card design with black-gold theme
      &-saga {
        background-color: var(--dnb-payment-bg-black-gold);
        color: var(--color-white);
        // Specific styles for separators within the Saga card.
        .provider--separator {
          color: var(--dnb-payment-bg-gold);
        }
      }

      // Shared styles for Saga Platinum and private cards with black-grey theme
      &-saga-platinum,
      &-private {
        background-color: var(--dnb-payment-bg-black-grey);
        color: var(--color-white);
      }

      // Black (Elite) card design
      &-black {
        background-color: var(--color-black);
        color: var(--color-white);
      }

      // Design for a business card without Visa support
      &-business-no-visa {
        background-color: var(--dnb-payment-bg-business-no-visa);
        color: var(--color-white);
      }

      // Design for a business card with Visa support
      &-business-with-visa {
        background-color: var(--dnb-payment-bg-business-with-visa);
        color: var(--color-white);
      }

      // Sbanken-themed Mastercard with purple background
      &-sbanken-mastercard {
        background-color: var(--sb-color-purple);
        color: var(--color-white);
      }

      // Sbanken-themed Visa card with a white background and custom text color.
      &-sbanken-visa {
        background-color: var(--color-white);
        color: var(--sb-color-text);
      }
    }

    /*
     * Primary container for card content (e.g., numbers, text, holder name).
     * Ensures content stretches to fit the card while preserving relative positioning.
     */
    &__content {
      display: flex;
      height: 100%;
      width: 100%;
      position: relative;
    }

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

    // Styling for the card number
    &__numbers.dnb-p {
      font-size: 1.375rem; // 22px
      line-height: 1.143rem;
      font-weight: var(--font-weight-regular);
    }

    // Card Type Text - Credit / Debit
    &__type-text.dnb-p {
      font-size: 0.938rem; // 15px
      line-height: 1.188rem;
      padding-top: 6px;
    }

    /* Provider Icons Container
     * Flex container to house provider logos (e.g., Visa, Mastercard, BankAxept).
     * Includes a visual separator if two providers are present. */
    &__providers {
      display: flex;
      align-items: center;
      column-gap: 1rem;

      // Adds divider between provider icons
      .provider--separator {
        width: 1px;
        height: 26px;
        background-color: currentcolor;
        transform: scale(
          0.5,
          1
        ); // subpixel rendering (0.5px width is not supported on some browsers)
      }
    }

    // Positioning of Card Elements
    &__top {
      // Bank + Loyalty Logos
      &__left {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
      }

      /*
       * Normal mode: Card Type Text (Credit / Debit)
       * Compact mode: Provider Icons
       */
      &__right {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    &__bottom {
      /*
       * Normal mode: Card Number
       * Compact mode: Hidden
       */
      &__left {
        position: absolute;
        bottom: 0;
        left: 0;
      }

      /*
       * Normal mode: Provider Icons
       * Compact mode: Hidden
       */
      &__right {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }

  /*
   * Overlay styling used for additional content or status displayed over the card element.
   * It centers the content and adapts the overlay design
   * based on the card's background theme (light or dark).
   */
  &__overlay {
    svg {
      width: 2rem;
      height: 2rem;
      shape-rendering: geometricprecision;
      &.icon--fill path {
        fill: currentcolor;
      }
      &.icon--stroke path {
        stroke: currentcolor;
      }
    }

    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: flex;
    justify-content: center;
    align-items: center;

    &__content {
      min-width: 6rem;
      height: 6rem;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.667rem;
      border-radius: inherit;
      font-size: var(--font-size-basis);
      line-height: var(--line-height-small);

      // cards with a light background use this overlay status
      &--light {
        background-color: var(--dnb-payment-overlay-bg-dark);
        color: var(--color-white);
      }

      // cards with a dark background use this overlay status
      &--dark {
        background-color: var(--dnb-payment-overlay-bg-light);
        color: var(--color-black);
      }
    }
  }

  /* Compact mode styling for PaymentCard component
   * This defines the styles and visual appearance of the card in its compact variant.
   * The compact variant is designed to be more concise, with reduced height and adjusted layouts.
   */
  &--compact &__card {
    height: 62px;
    border-radius: var(--dnb-payment-border-radius)
      var(--dnb-payment-border-radius) 0 0;

    &__wrapper {
      height: auto;
    }

    // Adjust the margin and height of the provider icons section
    &__providers {
      margin-top: 5px;
      height: 1.375rem;
      div,
      svg {
        height: 100%;
        width: auto;
      }

      // In compact mode with multiple providers, adjust margins and spacing
      &--multiple {
        margin-top: 7px;
        height: 1rem;
        column-gap: 0.5rem;
        div,
        svg {
          vertical-align: top;
        }

        // Define a fixed width for separators between provider icons
        .provider--separator {
          width: 1px;
        }
      }
    }
  }
  &--compact &__overlay {
    // In compact mode, hide overlay content, we only show opacity change if needed
    &__content {
      display: none;
    }
  }
}