#octane-quiz-outer-wrapper {
  background: var(--color-background);

  &::before {
    background: var(--color-background);
  }

  & [data-element="oct-quiz-text oct-quiz-title"] {
    font: var(--h3-font-mobile);
    letter-spacing: var(--h3-letter-spacing-mobile);
    color: var(--color-brand-black);

    @media screen and (min-width: 768px) {
      font: var(--h3-font-desktop);
      letter-spacing: var(--h3-letter-spacing);
    }
  }

  & [data-element="oct-quiz-text oct-quiz-subheading"],
  & .oct-quiz-multiple-choice-options__option {
    font: var(--body-font-mobile);
    letter-spacing: var(--body-letter-spacing-mobile);
    color: var(--color-brand-black);

    @media screen and (min-width: 768px) {
      font: var(--body-font-desktop);
      letter-spacing: var(--body-letter-spacing);
    }
  }

  & .oct-quiz-btn,
  [data-element*="oct-quiz-btn"] button,
  [data-element*="oct-quiz-buyall"] button,
  [data-element="oct-quiz-resultitem"] button,
  & #octane-quiz-wrapper > button {
    font-family: var(--font-button-family);
    font-size: var(--font-button-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--font-button-letter-spacing);
    line-height: 100%;
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 1rem 3rem;
    padding-top: calc(1rem + var(--font-button-baseline));
    text-decoration: none;
    border-radius: var(--button-radius);
    border: var(--button-border-width) solid rgb(var(--color-button-border));
    color: rgb(var(--color-button-text));
    background-color: var(--color-button-background);
    width: max-content;
    height: var(--button-height-s);
    min-height: unset;
    max-width: 100%;
    text-transform: uppercase;
    transition-property: color, box-shadow;
    transition-duration: var(--duration-long);
    transition-timing-function: ease;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    box-shadow: var(--button-shadow-horizontal-offset)
      var(--button-shadow-vertical-offset)
      rgba(var(--color-shadow), var(--shadow-opacity));

    &.oct-quiz-btn--primary,
    &.oct-quiz-btn--secondary,
    &.oct-quiz-btn--secondary-text {
      --color-button-background: var(--color-brand-black);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    /* Tertiary button */

    &.oct-quiz-btn--tertiary {
      --color-button-background: var(--color-brand-background);
      --color-button-border: var(--color-border);
      --color-button-text: var(--color-base-outline-button-labels);
      box-shadow: none;
      text-decoration: underline;
      text-underline-offset: var(--space-2xs);
    }

    @media screen and (hover: hover) {
      &::after {
        content: "";
        z-index: -1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 120%;
        height: 100%;
        background-color: rgb(var(--color-button-text));
        backface-visibility: hidden;
        will-change: transform;
        transform: rotate3d(0,0,1,10deg) translate3d(-1.2em,110%,0);
        transform-origin: 0% 100%;
        transition: transform var(--duration-long) ease;
      }
      &.oct-quiz-btn--tertiary::after {
        content: none;
      }

      &:hover {
        color: var(--color-button-background);
        box-shadow: none;
      }

      &:hover::after {
        transform: none;
      }

      &.oct-quiz-btn--tertiary:hover {
        color: rgb(var(--color-button-text));
        text-decoration-color: var(--color-grey-200);
      }
    }
  }

  [data-element*="oct-quiz-btn"] button,
  [data-element*="oct-quiz-buyall"] button,
  [data-element="oct-quiz-resultitem"] button,
  & #octane-quiz-wrapper > button {
    --color-button-background: var(--color-brand-black);
  }

  & .oct-quiz-content > .oct-quiz-btn.oct-quiz-btn--secondary-text,
  & #octane-quiz-wrapper > button {
    position: absolute;
    left: 3rem;
    top: 0;

    @media screen and (min-width: 768px) {
      left: 4rem;
    }
  }

  & .oct-quiz-multiple-choice-options__option {
    background: var(--color-background);
    border-color: var(--color-brand-black);
    color: var(--color-brand-black);
  }

  & .oct-quiz-picture-choice-options__option {
    font: var(--utility-font-mobile) !important;
    letter-spacing: var(--utility-letter-spacing-mobile) !important;
    text-transform: uppercase;

    @media screen and (min-width: 768px) {
      font: var(--utility-font-desktop) !important;
      letter-spacing: var(--utility-letter-spacing) !important;
    }
  }

  & #octane-quiz-wrapper {
    position: unset;
  }

  & [data-element*="oct-quiz-input"] {
    & input {
      background-color: transparent;
    }
  }

  & [data-element="oct-quiz-resultitem"] a,
  & [data-element="oct-quiz-resultitem"] div {
    color: var(--color-brand-black);
  }
}