/* TODO: adjust the build and find solution for duplicated definitions with global-variables.ts */

:root {
  /* Fonts */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  .brand-bmw,
  .bmw {
    --font-family: 'BMW Type Next Pro', sans-serif;
    --font-weight-default: var(--font-weight-light);
    --font-weight-overline: var(--font-weight-light);
    --font-weight-headline: var(--font-weight-light);
    --font-weight-input: var(--font-weight-regular);
    --font-weight-clickable: var(--font-weight-medium);
    --font-weight-menu: var(--font-weight-medium);
    --font-weight-price: var(--font-weight-bold);

    --font-size-overline: 0.875rem;
    --line-height-overline: 0.75rem;
    --letter-spacing-overline: 0.6em;
    --font-size-headline-xxl: 7.4375rem;
    --line-height-headline-xxl: 6.75rem;
    --font-size-headline-xl: 2.0625rem;
    --line-height-headline-xl: 2.875rem;
    --font-size-headline-l: 1.75rem;
    --line-height-headline-l: 2.5rem;
    --font-size-headline-m: 1.4375rem;
    --line-height-headline-m: 2rem;
    --font-size-headline-s: 1.1875rem;
    --line-height-headline-s: 1.75rem;
    --font-size-headline-xs: 1.0625rem;
    --line-height-headline-xs: 1.625rem;
    --font-size-body-l: 1rem;
    --line-height-body-l: 1.625rem;
    --font-size-body-m: 0.875rem;
    --line-height-body-m: 1.375rem;
    --font-size-body-s: 0.75rem;
    --line-height-body-s: 1.125rem;
    --opacity-disclaimer: 0.7051;

    @media screen and (min-width: 768px) {
      --font-size-headline-xxl: 7.875rem;
      --line-height-headline-xxl: 7rem;
      --font-size-headline-xl: 2.1875rem;
      --line-height-headline-xl: 3.125rem;
      --font-size-headline-l: 1.8125rem;
      --line-height-headline-l: 2.625rem;
      --font-size-headline-m: 1.5625rem;
      --line-height-headline-m: 2.25rem;
      --font-size-headline-s: 1.25rem;
      --line-height-headline-s: 1.875rem;
      --font-size-headline-xs: 1.125rem;
      --line-height-headline-xs: 1.75rem;
      --font-size-body-l: 1.0625rem;
      --line-height-body-l: 1.75rem;
    }

    @media screen and (min-width: 1280px) {
      --font-size-overline: 0.9375rem;
      --line-height-overline: 0.75rem;
      --font-size-headline-xxl: 13.125rem;
      --line-height-headline-xxl: 11.625rem;
      --font-size-headline-xl: 2.6875rem;
      --line-height-headline-xl: 3.75rem;
      --font-size-headline-l: 2.1875rem;
      --line-height-headline-l: 3.125rem;
      --font-size-headline-m: 1.75rem;
      --line-height-headline-m: 2.5rem;
      --font-size-headline-s: 1.4375rem;
      --line-height-headline-s: 2.25rem;
      --font-size-headline-xs: 1.25rem;
      --line-height-headline-xs: 1.875rem;
      --font-size-body-l: 1.125rem;
      --line-height-body-l: 1.75rem;
      --font-size-body-m: 0.9375rem;
      --line-height-body-m: 1.5rem;
    }

    @media screen and (min-width: 1920px) {
      --font-size-overline: 1rem;
      --line-height-overline: 0.875rem;
      --font-size-headline-xxl: 15.75rem;
      --line-height-headline-xxl: 14rem;
      --font-size-headline-xl: 3.75rem;
      --line-height-headline-xl: 5.25rem;
      --font-size-headline-l: 2.8125rem;
      --line-height-headline-l: 3.875rem;
      --font-size-headline-m: 2.125rem;
      --line-height-headline-m: 3rem;
      --font-size-headline-s: 1.5625rem;
      --line-height-headline-s: 2.375rem;
      --font-size-headline-xs: 1.375rem;
      --line-height-headline-xs: 2.125rem;
      --font-size-body-l: 1.1875rem;
      --line-height-body-l: 1.875rem;
      --font-size-body-m: 1rem;
      --line-height-body-m: 1.625rem;
    }
  }

  .brand-mini,
  .mini {
    --font-family: 'MINI Sans Serif', serif;
    --font-family-headline: 'MINI Serif', sans-serif;
    --text-transform-headline: uppercase;
    --font-weight-default: var(--font-weight-regular);
    --font-weight-overline: var(--font-weight-bold);
    --font-weight-headline: var(--font-weight-bold);
    --font-weight-input: var(--font-weight-regular);
    --font-weight-clickable: var(--font-weight-regular);
    --font-weight-menu: var(--font-weight-regular);
    --font-weight-price: var(--font-weight-bold);

    --font-size-overline: 0.875rem;
    --line-height-headline: 1;
    --font-size-headline-xl: 2.1875rem;
    --font-size-headline-l: 1.875rem;
    --font-size-headline-m: 1.5625rem;
    --font-size-headline-s: 1.25rem;
    --font-size-headline-xs: 1.125rem;
    --font-size-body-l: 1.125rem;
    --line-height-body-l: 1.5;
    --font-size-body-m: 1rem;
    --line-height-body-m: 1.25;
    --font-size-body-s: 0.875rem;
    --line-height-body-s: 1;

    @media screen and (min-width: 768px) {
      --font-size-headline-xl: 3.125rem;
      --font-size-headline-l: 2.1875rem;
      --font-size-headline-m: 1.875rem;
      --font-size-headline-s: 1.5625rem;
      --font-size-headline-xs: 1.25rem;
    }

    @media screen and (min-width: 1280px) {
      --font-size-headline-xl: 3.75rem;
      --font-size-headline-l: 3.125rem;
      --font-size-headline-m: 2.1875rem;
    }
  }

  /* Generic Colors */
  --color-white: #ffffff;
  --color-grey-light: #e6e6e6;
  --color-grey: #4d4d4d;
  --color-black: #000;
  --color-hover-on-dark: #bbbbbb;

  /* BMW Styles */
  --bmw-color-primary: #1c69d4;
  --bmw-color-secondary: #0653b6;
  --bmw-color-tertiary: #666;
  --bmw-color-tertiary-on-dark: #8e8e8e;
  --bmw-color-disabled: #bbb;
  --bmw-color-black: #262626;
  --bmw-color-white: #f2f2f2;
  --bmw-color-success: #3db014;
  --bmw-color-error: #d20000;
  --bmw-color-warn: #ffad1f;

  /* MINI Styles */
  --mini-color-primary: #0085ac;
  --mini-color-secondary: #006583;
  --mini-color-mercury: #e5e5e5;
  --mini-color-disabled: #999;
  --mini-color-tundora: #4a4a4a;
  --mini-color-success: transparent;
  --mini-color-error: #cc0000;
  --mini-color-warn: #ed9300;

  /* Gradients */
  --gradient-color: #262626;
  --gradient-steps: var(--gradient-color) 21.11%, rgba(38, 38, 38, 0.98) 30.85%,
    rgba(38, 38, 38, 0.96) 40.54%, rgba(38, 38, 38, 0.85) 53.02%, rgba(38, 38, 38, 0.74) 59.26%,
    rgba(38, 38, 38, 0.49) 70.8%, rgba(38, 38, 38, 0.32) 79.62%, rgba(38, 38, 38, 0.15) 88.3%,
    rgba(38, 38, 38, 0) 100%;
  --gradient-top: linear-gradient(180deg, var(--gradient-steps));
  --gradient-bottom: linear-gradient(0deg, var(--gradient-steps));

  /* A11Y */
  a:focus-visible,
  button:focus-visible,
  input[type='checkbox']:focus-visible + .checkmark {
    outline: 2px solid var(--focus-color, #ff00ff);
    outline-offset: var(--focus-offset, 2px);

    &.focus-inset {
      --focus-offset: -2px;
    }
  }

  .brand-bmw,
  .bmw {
    --focus-color: var(--bmw-color-primary);
  }

  .brand-mini,
  .mini {
    --focus-color: var(--mini-color-primary);
  }
}

body {
  font: var(--font-weight-default) var(--font-size-body-m, 1em) / var(--line-height-body-m, 1.5rem)
    var(--font-family);
  -webkit-font-smoothing: antialiased;
}

:is(h1, h2, h3, h4, h5, h6) {
  &,
  * {
    text-wrap: balance;
    font-weight: var(--font-weight-headline);
    text-transform: var(--text-transform-headline);
  }
}

h1 {
  font-size: var(--font-size-headline-m);
  line-height: var(--line-height-headline-m);
}

h2 {
  font-size: var(--font-size-headline-s);
  line-height: var(--line-height-headline-s);
}

h3 {
  font-size: var(--font-size-headline-xs);
  line-height: var(--line-height-headline-xs);
}

h4,
p {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  word-wrap: break-word;
}

h5 {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

h6,
.footnote-text p,
sup,
.bmw-body-copy-xxs,
.mini-body-copy-xxs {
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
}

.footnote-text {
  opacity: var(--opacity-disclaimer);
}

ul {
  padding-inline-start: 20px;
}

table {
  width: 100%;
  margin: 16px 0;

  td {
    a {
      color: black !important;
    }
  }
}

/* Typography */
.bmw {
  color: #262626;

  table {
    td:hover {
      a {
        color: #1c69d4 !important;
      }
    }
  }
}

.mini {
  a {
    color: #000000;
  }
  a:hover {
    color: #0085ac;
  }

  table {
    td:hover {
      a {
        color: #0085ac !important;
      }
    }
  }
}

.mini.shared-footnotes {
  p {
    margin-top: -10px;
  }
}

/* Trigger for popups in user-generated content */
.popup-trigger-customevent {
  cursor: pointer;
}

.brand-mini .ccm-cookie-declaration--loaded {
  font-family: 'MINI Sans Serif', 'MINI Serif', sans-serif;
  font-size: 18px;
}

.brand-mini .ccm-cookie-declaration--loaded a {
  color: #0085ac;
}

.brand-bmw .ccm-cookie-declaration--loaded {
  font-family: 'BMW Type Next Pro';
  font-size: 16px;
}

.brand-bmw .ccm-cookie-declaration--loaded a {
  color: #1c69d4;
}

.ccm-cookie-declaration--loaded
  .ccm-cookie-declaration--embedding-assets-table.ccm-cookie-declaration--table-cookie,
.ccm-cookie-declaration--loaded
  .ccm-cookie-declaration--embedding-assets-table.ccm-cookie-declaration--table-cookie,
.ccm-cookie-declaration--loaded
  .ccm-cookie-declaration--embedding-assets-table.ccm-cookie-declaration--table-localStorage,
.ccm-cookie-declaration--loaded
  .ccm-cookie-declaration--embedding-assets-table.ccm-cookie-declaration--table-sessionStorage,
.ccm-cookie-declaration--loaded
  .ccm-cookie-declaration--embedding-assets-table.ccm-cookie-declaration--table-other {
  border-collapse: collapse;
}

.ccm-cookie-declaration--loaded td {
  padding: 0 10px;
  border: 1px solid black;
}

@media (max-width: 767px) {
  .ccm-cookie-declaration--loaded h1 {
    font-size: 35px;
  }
  .ccm-cookie-declaration--loaded h2 {
    font-size: 30px;
  }
  .ccm-cookie-declaration--loaded h3 {
    font-size: 25px;
  }
  .ccm-cookie-declaration--loaded h4 {
    font-size: 20px;
  }
  .ccm-cookie-declaration--loaded h5 {
    font-size: 18px;
  }
}

@media (max-width: 1279px) {
  .ccm-cookie-declaration--loaded h1 {
    font-size: 50px;
  }
  .ccm-cookie-declaration--loaded h2 {
    font-size: 35px;
  }
  .ccm-cookie-declaration--loaded h3 {
    font-size: 30px;
  }
  .ccm-cookie-declaration--loaded h4 {
    font-size: 25px;
  }
  .ccm-cookie-declaration--loaded h5 {
    font-size: 20px;
  }
}