/* button defaults*/
.banner-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--vd-text-base-size);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--vd-ui-line-height);
  /* line-height: 1; */
  background: transparent;
  border: none;
  border-radius: var(--vd-border-radius);
  cursor: pointer;
  transition: all var(--vd-transition-ease-in-out) var(--vd-transition-default-duration);
  margin-top: var(--vd-space-m);
}

.banner-button:hover,
.banner-button:active,
.banner-button:focus {
  box-shadow: var(--vd-border-box-shadow), inset 0 0 0 2000px var(--vd-color-hover);
}

.banner-button-message {
  padding-top: 2px;
}

/* text link defaults */
.banner-text-link {
  display: inline-flex;
  font-size: var(--vd-text-base-size);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--vd-ui-line-height);
  margin-top: var(--vd-space-m);
}

.banner-text-link:hover {
  text-decoration: underline;
}

/* messaging defaults */
.banner-primary-message {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--vd-text-m);
  line-height: var(--vd-ui-line-height);
  color: var(--vd-color-black);
  text-transform: none;
}

.banner-secondary-message {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  font-size: var(--vd-text-base-size);
  line-height: var(--vd-ui-line-height);
  color: var(--vd-color-black);
  margin-top: var(--vd-space-xs);
  text-transform: none;
}

/* disclaimer defaults */
.banner-disclaimer {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 1;
  padding: var(--vd-inset-s);
  font-size: var(--vd-text-xs);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
}

/* overlay default */
.banner-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/* content block default */
.banner-content-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
  min-height: inherit;
}

/* content block disclaimer wrapper default */
.banner-content-block-disclaimerwrap {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

/* product default */
.banner-product {
  z-index: 1;
}

/* Helper Classes */

/* overlay colors */
.banner-overlay-brand40 {
  background-color: var(--vd-color-brand);
  opacity: 40%;
}

.banner-overlay-brand60 {
  background-color: var(--vd-color-brand);
  opacity: 60%;
}

.banner-overlay-brand80 {
  background-color: var(--vd-color-brand);
  opacity: 80%;
}

.banner-overlay-brandalt40 {
  background-color: var(--vd-color-brand-alt);
  opacity: 40%;
}

.banner-overlay-brandalt60 {
  background-color: var(--vd-color-brand-alt);
  opacity: 60%;
}

.banner-overlay-brandalt80 {
  background-color: var(--vd-color-brand-alt);
  opacity: 80%;
}

.banner-overlay-white40 {
  background-color: var(--vd-color-white);
  opacity: 40%;
}

.banner-overlay-white60 {
  background-color: var(--vd-color-white);
  opacity: 60%;
}

.banner-overlay-white80 {
  background-color: var(--vd-color-white);
  opacity: 80%;
}

.banner-overlay-black40 {
  background-color: var(--vd-color-black);
  opacity: 40%;
}

.banner-overlay-black60 {
  background-color: var(--vd-color-black);
  opacity: 60%;
}

.banner-overlay-black80 {
  background-color: var(--vd-color-black);
  opacity: 80%;
}

/* background colors */
.banner-background-brand {
  background-color: var(--vd-color-brand);
}

.banner-background-brandalt {
  background-color: var(--vd-color-brand-alt);
}

.banner-background-emphasis {
  background-color: var(--vd-color-emphasis);
}

.banner-background-white {
  background-color: var(--vd-color-white);
}

.banner-background-black {
  background-color: var(--vd-color-black);
}

/* primary/secondary message colors */
.banner-message-brand {
  color: var(--vd-color-brand);
}

.banner-message-brandalt {
  color: var(--vd-color-brand-alt);
}

.banner-message-black {
  color: var(--vd-color-black);
}

.banner-message-white {
  color: var(--vd-color-white);
}

.banner-message-textdark {
  color: var(--vd-color-text-dark);
}

.banner-message-dark {
  color: var(--vd-color-dark);
}

.banner-message-emphasis {
  color: var(--vd-color-emphasis);
}

/* disclaimer background colors */
.banner-disclaimer-brand {
  background-color: var(--vd-color-brand);
  opacity: 90%;
}

.banner-disclaimer-brandalt {
  background-color: var(--vd-color-brand-alt);
  opacity: 90%;
}

.banner-disclaimer-black {
  background-color: var(--vd-color-black);
  opacity: 90%;
}

.banner-disclaimer-white {
  background-color: var(--vd-color-white);
  opacity: 90%;
}

.banner-disclaimer-emphasis {
  background-color: var(--vd-color-emphasis);
  opacity: 90%;
}

/* border color */
.banner-border {
  border: 1px solid var(--vd-color-border);
}

/* button colors */
.banner-button.banner-button-primary {
  color: var(--vd-color-white);
  background-color: var(--vd-color-primary);
}

.banner-button.banner-button-secondary {
  color: var(--vd-color-primary);
  background-color: var(--vd-color-secondary);
}

/* text link colors */
.banner-text-link-primary {
  color: var(--vd-color-primary);
}

.banner-text-link-secondary {
  color: var(--vd-color-emphasis);
}

/* primary/secondary message font-size mobile */
.banner-message-xxs {
  font-size: var(--vd-text-xxs);
}

.banner-message-xs {
  font-size: var(--vd-text-xs);
}

.banner-message-s {
  font-size: var(--vd-text-s);
}

.banner-message-base {
  font-size: var(--vd-text-base-size);
}

.banner-message-m {
  font-size: var(--vd-text-m);
}

.banner-message-l {
  font-size: var(--vd-text-l);
}

.banner-message-xl {
  font-size: var(--vd-text-xl);
}

.banner-message-xxl {
  font-size: var(--vd-text-xxl);
}

@supports (container-type: inline-size) {
  /* primary/secondary message font-size desktop */
  @container (min-width: 748px) {
    .banner-message-l {
      font-size: var(--vd-text-l);
    }

    .banner-message-xl {
      font-size: var(--vd-text-xl);
    }

    .banner-message-xxl {
      font-size: var(--vd-text-xxl);
    }
  }
}

@supports not (container-type: inline-size) {
  /* primary/secondary message font-size desktop */
  @media (min-width: 748px) {
    .banner-message-l {
      font-size: var(--vd-text-l);
    }

    .banner-message-xl {
      font-size: var(--vd-text-xl);
    }

    .banner-message-xxl {
      font-size: var(--vd-text-xxl);
    }
  }
}

/* button sizes */
.banner-button.banner-button-small {
  padding: calc(var(--vd-space-xxs) + var(--vd-space-xs)) var(--vd-space-s);
}

.banner-button.banner-button-medium {
  padding: calc(var(--vd-space-s) + var(--vd-space-xxs)) calc(var(--vd-space-s) + var(--vd-space-xs));
}

.banner-button.banner-button-large {
  padding: calc(var(--vd-space-s) + var(--vd-space-xs)) var(--vd-space-m);
  font-size: var(--vd-text-m);
}

/* primary/secondary message font-weights */
.banner-message-light {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
}

.banner-message-regular {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
}

.banner-message-semibold {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
}

.banner-message-bold {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
}

/* primary/secondary message font-case */
.banner-message-uppercase {
  text-transform: uppercase;
}

.banner-message-lowercase {
  text-transform: none;
}

/* disclaimer padding inset-squish */
.banner-disclaimer-insq-s {
  padding: var(--vd-space-s) var(--vd-space-s);
}

.banner-disclaimer-insq-m {
  padding: var(--vd-space-s) var(--vd-space-m);
}

.banner-disclaimer-insq-l {
  padding: var(--vd-space-s) var(--vd-space-l);
}

.banner-disclaimer-insq-xl {
  padding: var(--vd-space-s) var(--vd-space-l);
}

@supports (container-type: inline-size) {
  /* disclaimer padding inset-squish tablet/desktop */
  @container (min-width: 768px) {
    .banner-disclaimer-insq-xl {
      padding: var(--vd-space-s) var(--vd-space-xl);
    }
  }
}

@supports not (container-type: inline-size) {
  /* disclaimer padding inset-squish tablet/desktop */
  @media (min-width: 768px) {
    .banner-disclaimer-insq-xl {
      padding: var(--vd-space-s) var(--vd-space-xl);
    }
  }
}

/* disclaimer message alignment */
.banner-disclaimer-left {
  text-align: left;
  justify-content: flex-start;
}

.banner-disclaimer-center {
  text-align: center;
  justify-content: center;
}

.banner-disclaimer-right {
  text-align: right;
  justify-content: flex-end;
}

/* content block alignment */
.banner-content-leftalign {
  text-align: left;
  justify-content: center;
  align-items: flex-start;
}

.banner-content-centeralign {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.banner-content-rightalign {
  text-align: right;
  justify-content: center;
  align-items: flex-end;
}

/* content block justify spacing */
.banner-content-spacebetween {
  justify-content: space-between;
}

/* content block padding inset mobile*/
.banner-content-in-s {
  padding: var(--vd-space-s);
}

.banner-content-in-m {
  padding: var(--vd-space-m);
}

.banner-content-in-l {
  padding: var(--vd-space-l);
}

.banner-content-in-xl {
  padding: var(--vd-space-l);
}

@supports (container-type: inline-size) {
  /* content block padding inset tablet/desktop */
  @container (min-width: 768px) {
    .banner-content-in-xl {
      padding: var(--vd-space-xl);
    }
  }
}

@supports not (container-type: inline-size) {
  /* content block padding inset tablet/desktop */
  @media (min-width: 768px) {
    .banner-content-in-xl {
      padding: var(--vd-space-xl);
    }
  }
}

/* content block padding inset-squish mobile */
.banner-content-insq-xs {
  padding: var(--vd-inset-squish-xs);
}

.banner-content-insq-s {
  padding: var(--vd-inset-squish-s);
}

.banner-content-insq-m {
  padding: var(--vd-inset-squish-m);
}

.banner-content-insq-l {
  padding: var(--vd-inset-squish-l);
}

.banner-content-insq-xl {
  padding: var(--vd-space-l) var(--vd-space-l);
}

@supports (container-type: inline-size) {
  /* content block inset-squish tablet/desktop */
  @container (min-width: 768px) {
    .banner-content-insq-xl {
      padding: var(--vd-space-l) var(--vd-space-xl);
    }
  }
}

@supports not (container-type: inline-size) {
  /* content block inset-squish tablet/desktop */
  @media (min-width: 768px) {
    .banner-content-insq-xl {
      padding: var(--vd-space-l) var(--vd-space-xl);
    }
  }
}

/* banner content image/product width - mobile */
.banner-content-30,
.banner-content-40,
.banner-content-50,
.banner-content-60,
.banner-content-70 {
  width: 100%;
}

@supports (container-type: inline-size) {
  /* banner content image/product width - tablet/desktop */
  @container banner-hero (min-width: 768px) {
    .banner-content-30 {
      width: 30%;
    }

    .banner-content-40 {
      width: 40%;
    }

    .banner-content-50 {
      width: 50%;
    }

    .banner-content-60 {
      width: 60%;
    }

    .banner-content-70 {
      width: 70%;
    }
  }

  @container banner-catalog (min-width: 480px) {
    .banner-content-30 {
      width: 30%;
    }

    .banner-content-40 {
      width: 40%;
    }

    .banner-content-50 {
      width: 50%;
    }

    .banner-content-60 {
      width: 60%;
    }

    .banner-content-70 {
      width: 70%;
    }
  }
}

@supports not (container-type: inline-size) {
  /* banner content image/product width - tablet/desktop */
  @media (min-width: 768px) {
    .banner-content-30 {
      width: 30%;
    }

    .banner-content-40 {
      width: 40%;
    }

    .banner-content-50 {
      width: 50%;
    }

    .banner-content-60 {
      width: 60%;
    }

    .banner-content-70 {
      width: 70%;
    }
  }
}

/* banner content image/product direction mobile */
.banner-content-imageleft,
.banner-content-imageright {
  display: flex;
  flex-direction: column;
}

@supports (container-type: inline-size) {
  /* banner content image/product direction tablet/desktop */
  @container banner-hero (min-width: 768px) {
    .banner-content-imageleft {
      flex-direction: row;
    }

    .banner-content-imageright {
      flex-direction: row-reverse;
    }
  }

  @container banner-catalog (min-width: 480px) {
    .banner-content-imageleft {
      flex-direction: row;
    }

    .banner-content-imageright {
      flex-direction: row-reverse;
    }
  }
}

@supports not (container-type: inline-size) {
  /* banner content image/product direction tablet/desktop */
  @media (min-width: 768px) {
    .banner-content-imageleft {
      flex-direction: row;
    }

    .banner-content-imageright {
      flex-direction: row-reverse;
    }
  }
}

/* generic padding inset (equal padding) */
.banner-in-xs {
  padding: var(--vd-inset-xs);
}

.banner-in-s {
  padding: var(--vd-inset-s);
}

.banner-in-m {
  padding: var(--vd-inset-m);
}

.banner-in-l {
  padding: var(--vd-inset-l);
}

.banner-in-xl {
  padding: var(--vd-inset-xl);
}

/* generic padding inset-squish (more space on sides) */
.banner-insq-xs {
  padding: var(--vd-inset-squish-xs);
}

.banner-insq-s {
  padding: var(--vd-inset-squish-s);
}

.banner-insq-m {
  padding: var(--vd-inset-squish-m);
}

.banner-insq-l {
  padding: var(--vd-inset-squish-l);
}

/* generic padding inset-stretch (more space on top/bottom) */
.banner-inst-s {
  padding: var(--vd-inset-stretch-s);
}

.banner-inst-m {
  padding: var(--vd-inset-stretch-m);
}

.banner-inst-l {
  padding: var(--vd-inset-stretch-l);
}