@import "../_variables";

/* ==========================================================================
   Card View
   ========================================================================== */
body {
  // --a-cv-grid-gap: 16px;
  // --a-cv-item-width: 304px;

  // --a-cv-order-header: 1;
  // --a-cv-order-media: 2;
  // --a-cv-order-body: 3;
  // --a-cv-order-actions: 4;

  --a-cv-border-width: 1px;
  --a-cv-border-color: fade(@g_neutral-190, 10%);
  --a-cv-border-radius: 6px;
  // --a-cv-background-color: @g_Region-BG;
  // --a-cv-text-color:;
  // --a-cv-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);

  // --a-cv-hover-background-color: var(--a-cv-background-color);
  // --a-cv-hover-text-color: var(--a-cv-text-color);
  // --a-cv-hover-border-color: var(--a-cv-border-color);
  // --a-cv-hover-shadow: 0 4px 8px 0 @_base-shadow-4;

  // --a-cv-active-background-color: var(--a-cv-background-color);
  // --a-cv-active-text-color: var(--a-cv-text-color);
  // --a-cv-active-border-color: var(--a-cv-border-color);
  // --a-cv-active-shadow: var(--a-cv-shadow);

  // --a-cv-focus-background-color: var(--a-cv-background-color);
  // --a-cv-focus-text-color: var(--a-cv-text-color);
  // --a-cv-focus-border-color: @g_Focus;
  // --a-cv-focus-shadow: var(--a-cv-shadow);

  --a-cv-media-background-color: fade(@g_neutral-190, 5%);
  --a-cv-media-border-radius: 6px;
  --a-cv-media-padding-x: 0px;
  --a-cv-media-padding-y: 0px;

  // --a-cv-header-background-color: ;
  // --a-cv-header-text-color: ;
  // --a-cv-header-padding-y: 16px;
  // --a-cv-header-padding-x: 16px;
  // --a-cv-header-item-spacing-x: 12px;
  --a-cv-header-border-width: 0px;
  --a-cv-header-border-color: unset;

  // --a-cv-icon-background-color: @g_Accent-BG;
  // --a-cv-icon-background-image: ;
  // --a-cv-icon-text-color: @g_Accent-FG;
  // --a-cv-icon-border-radius: 100%;
  // --a-cv-icon-size: 16px;
  // --a-cv-icon-container-size: 32px;
  // --a-cv-icon-padding: 8px;

  // --a-cv-icon-image-size: ;
  // --a-cv-icon-image-border-radius: ;

  --a-cv-initials-border-radius: 4px;
  --a-cv-initials-size: 44px;
  // --a-cv-initials-padding: ;
  --a-cv-initials-font-size: 16px;
  --a-cv-initials-font-weight: 600;
  --a-cv-initials-text-color: #fff;
  --a-cv-initials-background-color: @g_neutral-130;
  // --a-cv-initials-background-image: ;

  --a-cv-title-font-size: 20px;
  --a-cv-title-font-weight: 800;
  --a-cv-title-line-height: 28px;
  // --a-cv-title-text-color: ;

  --a-cv-subtitle-font-size: 14px;
  --a-cv-subtitle-font-weight: 400;
  --a-cv-subtitle-line-height: 16px;
  --a-cv-subtitle-text-color: fade(@g_neutral-190, 60%);

  --a-cv-badge-font-size: 14px;
  --a-cv-badge-font-weight: 700;
  --a-cv-badge-line-height: 16px;
  --a-cv-badge-text-color: @g_neutral-0;
  --a-cv-badge-background-color: fade(@g_neutral-190, 60%);
  --a-cv-badge-border-radius: 6px;
  --a-cv-badge-padding: 4px 8px;

  // --a-cv-body-padding-x: 16px;
  // --a-cv-body-padding-y: 16px;
  // --a-cv-body-background-color: ;

  --a-cv-maincontent-font-size: 16px;
  --a-cv-maincontent-line-height: 24px;
  // --a-cv-maincontent-text-color: ;

  --a-cv-subcontent-font-size: 14px;
  --a-cv-subcontent-line-height: 16px;
  --a-cv-subcontent-text-color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG,  60%), 100%), desaturate(lighten(@g_Region-BG,  60%), 50%)), 100%);

  --a-cv-actions-border-width: 0px;
  --a-cv-actions-border-color: unset;
  --a-cv-actions-padding-y: 16px;
  --a-cv-actions-padding-x: 16px;
  --a-cv-actions-background-color: @g_neutral-20;
}

.a-CardView-badge {
  font-stretch: condensed;
}

.a-CardView-media--first {
  margin: 16px 16px 0;
}

.a-CardView-media--body {
  margin: 0 16px;
}

.a-CardView-actions {
  border-bottom-left-radius: var(--a-cv-border-radius);
  border-bottom-right-radius: var(--a-cv-border-radius);
}


body .a-CardView.has-media--background {


  .a-CardView-header,
  .a-CardView-body,
  .a-CardView-footer {
    background-color: transparent;
    border: 0;
  }

  .a-CardView-button {
    --a-button-background-color: transparent;
    --a-button-border-color: fade(@g_neutral-10, 50%);
    --a-button-text-color: @g_neutral-10;
    --a-button-hover-background-color: fade(@g_neutral-10, 10%);
    --a-button-active-background-color: fade(@g_neutral-10, 20%);
    --a-button-focus-background-color: fade(@g_neutral-10, 10%);

    outline-color: fade(@g_neutral-10, 60%);
  }

  .a-CardView-button--hot {
    --a-button-border-width: ~"0px";
    --a-button-background-color: @g_green-100;
    --a-button-border-color: var(--a-button-background-color);
    --a-button-text-color: @g_neutral-0;
    --a-button-hover-background-color: @g_green-110;
    --a-button-active-background-color: @g_green-120;
    --a-button-focus-background-color: @g_green-110;
  }
}


// Actions
body .a-CardView-button {
  --a-button-font-size: 14px;
  // --a-button-line-height: 16px;
  --a-button-border-width: 1px;
  --a-button-border-radius: 4px;
  --a-button-border-color: fade(@g_neutral-190, 50%);
  --a-button-background-color: transparent;
  --a-button-text-color: @g_neutral-190;
  --a-button-shadow: none;
  --a-button-hover-background-color: fade(@g_neutral-190, 4%);
  --a-button-hover-shadow: none;
  --a-button-active-background-color: fade(@g_neutral-190, 6%);
  --a-button-focus-background-color: fade(@g_neutral-190, 4%);

  --a-button-padding-y: 10px;
  --a-button-padding-x: 10px;

  outline-color: fade(@g_neutral-190, 60%);
}

body .a-CardView-button--hot {
  --a-button-background-color: @g_neutral-170;
  --a-button-text-color: @g_neutral-0;
  --a-button-hover-background-color: @g_neutral-160;
  --a-button-active-background-color: @g_neutral-150;
  --a-button-focus-background-color: @g_neutral-160;
}


/* ==========================================================================
   Card Variations
   ========================================================================== */
// Style A
body .t-CardsRegion--styleA {
  --a-cv-media-overlay-color: fade(@g_neutral-190, 80%);

  --a-cv-icon-container-size: 44px;
  --a-cv-icon-size: 16px;
  --a-cv-icon-border-radius: 6px;

  --a-cv-icon-image-size: var(--a-cv-icon-container-size);
  --a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);

  --a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
  --a-cv-initials-size: var(--a-cv-icon-container-size);
  --a-cv-initials-font-size: 16px;
  --a-cv-initials-font-weight: 400;

  --a-cv-badge-padding: 4px 8px;
  --a-cv-badge-border-radius: 6px;

  --a-cv-actions-background-color: transparent;

  .has-media--background {
    --a-cv-text-color: #fff;
    --a-cv-subtitle-text-color: fade(@g_neutral-10, 60%);
    --a-cv-subcontent-text-color: rgba(255, 255, 255, .6);
    --a-cv-badge-background-color: rgba(255, 255, 255, .2);
  }

  .has-media--body,
  .has-media--first {
    --a-cv-media-border-radius: 6px;
  }

  .has-icon--top {
    --a-cv-icon-container-size: 144px;
    --a-cv-icon-size: 96px;
    --a-cv-icon-border-radius: 6px;

    --a-cv-icon-image-size: var(--a-cv-icon-container-size);
    --a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);

    --a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
    --a-cv-initials-size: var(--a-cv-icon-container-size);
    --a-cv-initials-font-size: 56px;
  }
}

// Style B (centered header)
body .t-CardsRegion--styleB {
  --a-cv-actions-background-color: transparent;

  .has-icon--top {
    --a-cv-icon-container-size: 144px;
    --a-cv-icon-size: 56px;
    --a-cv-icon-border-radius: 8px;

    --a-cv-icon-image-size: var(--a-cv-icon-container-size);
    --a-cv-icon-image-border-radius: var(--a-cv-icon-border-radius);

    --a-cv-initials-border-radius: var(--a-cv-icon-border-radius);
    --a-cv-initials-size: var(--a-cv-icon-container-size);
    --a-cv-initials-font-size: 56px;

    .a-CardView-icon:before {
      background-color: transparent;
      text-shadow: none;
    }
  }
}