:root {
  --text-color: #030219;
  --heading-color: #030219;
  --midnight-color: #030219;
  --bg-color: #f2f2f2;
  --gray-light-color: #f2f2f2;
  --gray-dark-color: #212121;
  --link-text-color: #122cde;
  --link-text-color-hover: #030219;
  --button-text-color: #fff;
  --button-bg-color: #122cde;
  --divider-color: #cfe253;
  --white-color: #ffffff;
  --black-color: #000000;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

* {
  scroll-margin-top: 142px;
}

.festival {
  --text-color: #030219;
  --heading-color: #030219;
  --link-text-color: #122cde;
  --link-text-color-hover: #030219;
  --button-text-color: #fff;
  --button-bg-color: #d24204;
  --divider-color: #cfe253;
  --white-color: #ffffff;
}

.heineken {
  --text-color: #005d11;
  --heading-color: #030219;
  --bg-color: #a1e005;
  --link-text-color: #005d11;
  --link-text-color-hover: #030219;
  --button-text-color: #fff;
  --button-bg-color: #005d11;
  --divider-color: #cfe253;
  --white-color: #ffffff;

  a,
  a small {
    &:hover,
    &:active {
      color: var(--link-text-color-hover);
      opacity: 1;
    }
  }
}

.cards-in-columns--theme-base {
  --divider-color: #122cde;
}

.cards-in-columns--theme-heineken {
  --bg-color: #005d11;
}

.domino {
  &.base {
    &.gray,
    &.clear-green {
      --button-bg-color: #d24204;
      --button-text-color: #fff;

      & .headings__description {
        & a {
          --link-text-color: #030219;
        }
      }

      & .domino-item__link {
        & a:hover {
          --button-bg-color: #030219;
        }
      }
    }

    &.blue {
      --button-bg-color: #122cde;
      --button-text-color: #fff;

      & .headings__description {
        & a {
          --link-text-color: #ffffff;
        }
      }

      & .domino-item__link {
        & a {
          border: 2px solid #ffffff;

          &:hover {
            --button-bg-color: #ffffff;
            --button-text-color: #030219;
          }
        }
      }
    }

    &.midnight {
      --button-bg-color: #d24204;
      --button-text-color: #fff;

      & .headings__description {
        & a {
          --link-text-color: #ffffff;
        }
      }

      & .domino-item__link {
        & a {
          border: 2px solid var(--button-bg-color);

          &:hover {
            --button-bg-color: #030219;
            --button-text-color: #ffffff;
            border: 2px solid #ffffff;
          }
        }
      }
    }
  }

  &.hk-white {
    --button-text-color: #005d11;
    --button-bg-color: #a1e005;

    & .domino-item__link {
      & a {
        &:hover {
          --button-bg-color: #005d11;
          --button-text-color: #ffffff;
        }
      }
    }
  }
}

footer {
  &:has([data-component-id="incmty:footer"].midnight) {
    --bg-color: #030219;
  }

  &:has([data-component-id="incmty:footer"].hk-dark) {
    --bg-color: #005d11;
  }

  &:has([data-component-id="incmty:footer_bottom"].midnight) {
    --bg-color: #030219;
  }

  &:has([data-component-id="incmty:footer_bottom"].hk-dark) {
    --bg-color: #005d11;
  }
}

.ckeditor .text-formatted .media {
  margin: 0;
}

.ckeditor .text-formatted .media .embed-media--video-youtube iframe {
  width: auto;
  height: auto;
}

.ckeditor .text-formatted .media .embed-media--video-youtube,
.ckeditor .text-formatted .media .embed-media--video-vimeo {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;

  & iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.ckeditor .text-formatted * + * {
  margin-top: 16px;
}

.ckeditor .text-formatted {
  * + ul,
  * + ol {
    margin-block: 0;
    margin-top: 8px;
  }

  ul, ol {
    li + li {
      margin-top: 8px;
    }
  }
}

/* Background colors */
.blue {
  --heading-color: #fff;
  --text-color: #fff;
  --divider-color: #cfe253;
  --link-text-color: #fff;
  --link-text-color-hover: #fff;
  --bg-color: #122cde;
}

.lightblue {
  --heading-color: #005d11;
  --text-color: #005d11;
  --divider-color: #cfe253;
  --link-text-color: #fff;
  --link-text-color-hover: #fff;
  --bg-color: #a1c9ff;
}

.orange {
  --heading-color: #fff;
  --text-color: #fff;
  --divider-color: #cfe253;
  --link-text-color: #fff;
  --link-text-color-hover: #fff;
  --bg-color: #d24204;
}

.white {
  --heading-color: #030219;
  --text-color: #030219;
  --divider-color: #cfe253;
  --link-text-color: #122cde;
  --link-text-color-hover: #030219;
  --bg-color: #fff;

  a:hover {
    color: var(--link-text-color-hover);
    opacity: 1;
  }
}

.gray {
  --heading-color: #030219;
  --text-color: #030219;
  --divider-color: #cfe253;
  --link-text-color: #122cde;
  --color-link-hover: #030219;
  --bg-color: #f2f2f2;

  a:hover {
    color: var(--link-text-color-hover);
    opacity: 1;
  }
}

.clear-green,
.light-green,
.light_green {
  --heading-color: #030219;
  --text-color: #030219;
  --divider-color: #d24204;
  --link-text-color: #122cde;
  --link-text-color-hover: #030219;
  --bg-color: #cfe253;

  a:hover {
    color: var(--link-text-color-hover);
    opacity: 1;
  }
}

.midnight {
  --heading-color: #fff;
  --text-color: #fff;
  --divider-color: #cfe253;
  --link-text-color: #fff;
  --link-text-color-hover: #fff;
  --bg-color: #030219;
}

.hk-white,
.heineken.white,
.heineken .white,
.heineken.gray {
  --heading-color: #005d11;
  --text-color: #005d11;
  --divider-color: #005d11;
  --link-text-color: #005d11;
  --link-text-color-hover: #030219;
  --bg-color: #fff;

  a:hover {
    color: var(--link-text-color-hover);
    opacity: 1;
  }
}

.heineken.gray {
  --bg-color: #f2f2f2;
}

.hk-dark,
.heineken-dark-green,
.hk-green-dark,
.heineken_dark_green {
  --heading-color: #fff;
  --text-color: #fff;
  --divider-color: #cfe253;
  --link-text-color: #fff;
  --link-text-color-hover: #fff;
  --bg-color: #005d11;

  a,
  a small {
    &:hover,
    &:active {
      color: var(--link-text-color-hover);
      opacity: 0.75;
    }
  }
}

.hk-light,
.heineken-light-green,
.hk-green-light,
.heineken_light_green {
  --heading-color: #005d11;
  --text-color: #005d11;
  --divider-color: #005d11;
  --link-text-color: #005d11;
  --link-text-color-hover: #030219;
  --bg-color: #a1e005;

  a:hover {
    color: var(--link-text-color-hover);
    opacity: 1;
  }

  .btn.hk-dark:hover {
    border-color: #005d11;
  }
}

.ckeditor .text-formatted {
  a:not(.link-arrow):not(.btn) {
    font-weight: 700;

    small {
      font-weight: 700;
    }
  }

  a:not(.btn):hover {
    text-decoration: underline;
  }

  a:focus {
    outline: none;
    box-shadow: none;
  }

  ol,
  ul {
    margin-inline: 24px 0;
  }
}

a,
button {
  &.link-arrow {
    position: relative;
    color: var(--button-bg-color);
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 18px;
    /* 150% */
    text-decoration: none;

    &.right {
      padding-right: 16px;

      &:after {
        content: "";
        right: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-color: var(--button-bg-color);
        mask-size: 16px 16px;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-image: url(/themes/custom/incmty/images/svg/chevron-right.svg);
        background-image: none;
      }
    }

    &.left {
      padding-left: 16px;

      &:before {
        content: "";
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-color: var(--button-bg-color);
        mask-size: 16px 16px;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-image: url(/themes/custom/incmty/images/svg/chevron-left.svg);
        background-image: none;
      }
    }

    &.blue {
      color: #122cde;

      &::after {
        color: #122cde;
      }

      &:hover {
        color: #030219;
        opacity: 1;

        &::after {
          background-color: #030219;
        }
      }
    }

    &.orange {
      color: #d24204;

      &::after {
        background-color: #d24204;
      }

      &:hover {
        color: #030219;
        opacity: 1;

        &::after {
          background-color: #030219;
        }
      }
    }

    &.white,
    &.hk-light,
    &.ghost {
      color: #fff;

      &::after {
        background-color: #fff;
      }

      &:hover {
        &::after {
          background-color: #fff;
        }
      }
    }

    &.hk-dark {
      color: #005d11;

      &::after {
        background-color: #005d11;
      }

      &:hover {
        color: #030219;
        opacity: 1;

        &::after {
          background-color: #030219;
        }
      }
    }
  }

  &.link {
    padding: 16px 32px;
    border-radius: 96px;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 18px;
    /* 150% */
    text-decoration: none;

    &.small {
      padding: 11px 42px;
    }
  }

  &.btn {
    display: inline-block;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 18px;
    padding: 16px 32px;
    border-radius: 96px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid var(--button-bg-color);
    transition: 0.3s;

    &:hover {
      border-color: var(--button-bg-color);
      background: var(--button-text-color);
      color: var(--button-bg-color);
      text-decoration: none;
    }

    &.small {
      padding: 12px 24px;
      width: 142px;
      height: 16px;
      max-width: calc(100% - 52px);
    }

    &.medium {
      padding: 16px 24px;
      width: 142px;
      max-width: calc(100% - 52px);
    }

    &.large {
      padding: 16px 24px;
      max-width: 453px;
      width: calc(100% - 52px);
    }

    &.blue {
      background-color: #122cde;
      border: 2px solid #122cde;
      color: #fff;

      &:hover {
        border-color: #fff;
        background: #030219;
        color: #fff;
        opacity: 1;
      }
    }

    &.orange {
      background-color: #d24204;
      border: 2px solid #d24204;
      color: #fff;

      &:hover {
        border-color: #fff;
        background: #030219;
        color: #fff;
        opacity: 1;
      }
    }

    &.white {
      background-color: #fff;
      border: 2px solid #fff;
      color: #030219;

      &:hover {
        border-color: #fff;
        background: #030219;
        color: #fff;
        opacity: 1;
      }
    }

    &.ghost {
      background-color: transparent;
      border: 2px solid #fff;
      color: #fff;

      &:hover {
        border-color: #fff;
        background: #030219;
        opacity: 1;
      }
    }

    &.hk-dark {
      background-color: #005d11;
      border: 2px solid #005d11;
      color: #fff;

      &:hover {
        border-color: #a1e005;
        background: #a1e005;
        color: #005d11;
        opacity: 1;
      }
    }

    &.hk-light {
      background-color: #fff;
      border: 2px solid #fff;
      color: #005d11;

      &:hover {
        border-color: #a1e005;
        background: #a1e005;
        color: #005d11;
        opacity: 1;
      }
    }
  }
}

a,
a small {
  color: var(--link-text-color);

  &:hover,
  &:active {
    color: var(--link-text-color-hover);
    opacity: 0.75;
    text-decoration: underline;
  }

  &:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}

hr {
  height: 2px;
  background: var(--divider-color);
}

blockquote {
  margin-left: 32px;

  &::before {
    content: "";
    border-left: 2px solid var(--divider-color);
    height: 100%;
    left: -16px;
  }
}

@media only screen and (min-width: 1024px) {
  a,
  button {
    &.btn {
      &.large {
        padding: 16px 24px;
      }
    }
  }
}

.gin-secondary-toolbar {
  background-color: var(--white-color);
}

.nav-white {
  --bg-color: #ffffff;
  --text-color: #030219;
  --link-text-color: #030219;
  --button-text-color: #fff;
  --button-bg-color: #122cde;
  --button-hover-bg-color: #030219;
  --button-hover-text-color: #ffffff;
  --divider-color: #030219;
  --nav-overlay-color: rgba(255, 255, 255, 0.75);
}

.nav-midnight {
  --bg-color: #030219;
  --text-color: #ffffff;
  --link-text-color: #ffffff;
  --button-text-color: #fff;
  --button-bg-color: #d24204;
  --button-hover-bg-color: #ffffff;
  --button-hover-text-color: #030219;
  --divider-color: #ffffff;
  --nav-overlay-color: rgba(3, 2, 25, 0.75);
}

.nav-heineken {
  --bg-color: #005d11;
  --text-color: #ffffff;
  --link-text-color: #ffffff;
  --button-text-color: #005d11;
  --button-bg-color: #a1e005;
  --button-hover-bg-color: #ffffff;
  --button-hover-text-color: #005d11;
  --divider-color: #ffffff;
  --nav-overlay-color: rgba(0, 93, 17, 0.75);

  &.btn-heineken-cyan {
    --button-text-color: #005d11;
    --button-bg-color: #6CFCF1;
    --button-hover-bg-color: #ffffff;
    --button-hover-text-color: #005d11;
  }
}

.hc-theme-base {
  --bg-color: #f2f2f2;
  --headings-color: #030219;
  --text-color: #030219;
  --link-color: #122cde;
  --button-bg-color: #122cde;
  --button-text-color: #fff;
  --divider-color: #122cde;
  --load-more-bg: #122cde;
  --load-more-text-color: #fff;

  &.hc-bg-white,
  &.hc-bg-gray {
    --bg-color: #f2f2f2;
    --slider-controls-border-color: #030219;
    --slider-controls-bg: transparent;
    --slider-controls-color: #030219;
  }

  &.hc-bg-midnight {
    --bg-color: #030219;
    --headings-color: #fff;
    --load-more-bg: #122cde;
    --load-more-text-color: #fff;
    --slider-controls-border-color: #fff;
    --slider-controls-bg: transparent;
    --slider-controls-color: #fff;
  }

  &.lightblue {
    --bg-color: #a1c9ff;
    --headings-color: #005d11;
    --slider-controls-bg: #005d11;
  }

  &.blue {
    --bg-color: #122cde;
    --headings-color: #ffffff;
    --slider-controls-color: #ffffff;
    --slider-controls-border-color: #ffffff;
  }
}

.hc-theme-festival {
  --bg-color: #f2f2f2;
  --headings-color: #030219;
  --text-color: #030219;
  --link-color: #d24204;
  --button-bg-color: #d24204;
  --button-text-color: #fff;
  --divider-color: #cfe253;
  --load-more-bg: #d24204;
  --load-more-text-color: #fff;

  &.hc-bg-white,
  &.hc-bg-gray {
    --bg-color: #f2f2f2;
    --slider-controls-border-color: #030219;
    --slider-controls-bg: transparent;
    --slider-controls-color: #030219;
  }

  &.hc-bg-midnight {
    --bg-color: #030219;
    --headings-color: #fff;
    --load-more-bg: #d24204;
    --load-more-text-color: #fff;
    --slider-controls-border-color: #fff;
    --slider-controls-bg: transparent;
    --slider-controls-color: #fff;
  }

  &.lightblue {
    --bg-color: #a1c9ff;
    --headings-color: #005d11;
    --slider-controls-color: #fff;
    --slider-controls-bg: #005d11;
  }
}

.hc-theme-heineken {
  --bg-color: #f2f2f2;
  --headings-color: #005d11;
  --text-color: #005d11;
  --link-color: #005d11;
  --button-bg-color: #005d11;
  --button-text-color: #fff;
  --divider-color: #a1e005;
  --load-more-bg: #005d11;
  --load-more-text-color: #fff;

  &.hc-bg-white,
  &.hc-bg-gray {
    --bg-color: #f2f2f2;
    --slider-controls-bg: #005d11;
    --slider-controls-border-color: #005d11;
    --slider-controls-color: #fff;
  }

  &.hc-bg-midnight {
    --bg-color: #005d11;
    --headings-color: #fff;
    --load-more-bg: #fff;
    --load-more-text-color: #005d11;
    --slider-controls-bg: transparent;
    --slider-controls-border-color: #fff;
    --slider-controls-color: #fff;
  }

  &.lightblue {
    --bg-color: #a1c9ff;
    --headings-color: #005d11;
    --slider-controls-color: #fff;
    --slider-controls-bg: #005d11;
  }
}

[data-component-id="incmty:noticias"] {
  --bg-color: #ffffff;
  --text-color: #030219;
  --heading-color: #030219;
  --link-text-color: #122cde;
  --button-text-color: #fff;
  --button-bg-color: #122cde;
  --divider-color: #122cde;

  &.hc-bg-gray {
    --bg-color: #f2f2f2;
  }

  &.hc-bg-midnight {
    --bg-color: #030219;
    --heading-color: #fff;
  }

  &.festival {
    --text-color: #030219;
    --heading-color: #030219;
    --link-text-color: #122cde;
    --button-text-color: #fff;
    --button-bg-color: #d24204;
    --divider-color: #cfe253;
  }

  &.heineken {
    --text-color: #005d11;
    --heading-color: #005d11;
    --link-text-color: #122cde;
    --button-text-color: #fff;
    --button-bg-color: #005d11;
    --divider-color: #cfe253;

    &.hc-bg-midnight {
      --bg-color: #a1e005;
    }
  }
}