@value small-tablet-breakpoint-query from '~diem-docusaurus-components/src/variables.module.css';

:global(.CookieConsent) {
  background-color: var(--default-background-color) !important;
  border-top: 1px solid white !important;
  box-shadow: 0 -13px 14px 0px rgba(0, 0, 0, 0.2);
  color: var(--ifm-heading-color) !important;
  flex-flow: column nowrap !important;
  justify-content: flex-start !important;
  max-height: 100vh;
  overflow: scroll;
  padding: 20px 0;
}

:global(.CookieConsent) > * {
  padding: 0 20px;
}

:global(.CookieConsent) > div:last-child { /* Buttons container */
  display: flex;
}

.cookieContent {
  flex: 0 !important;
  margin: 0 !important;
}

:global(.CookieConsent) .title {
  line-height: 34px;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 15px;
}

.cookieContent p {
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  margin-bottom: 20px;
}

.cookieContent p:last-child {
  margin-bottom: 20px;
}

.cookieButton {
  border-radius: 22.5px !important;
  border: 2px solid var(--accent-highlight) !important;
  font-size: 14px;
  margin: 0 !important;
  padding: 0 28.5px !important;
  height: 45px;
}

.cookieAccept,
.cookieDecline:hover {
  background-color: var(--accent-highlight) !important;
  color: var(--color-contrast) !important;
}

.cookieDecline,
.cookieAccept:hover {
  background-color: transparent !important;
  color: var(--accent-highlight) !important;
}

.cookieDecline {
  margin-left: 20px !important;
}

@media small-tablet-breakpoint-query {
  :global(.CookieConsent) {
    height: initial;
    justify-content: inherit !important;
    padding: 30px 0;
  }

  :global(.CookieConsent) > * {
    padding: 0 40px;
  }

  .cookieContent {
    flex: 1 !important;
  }

  .cookieContent .title {
    font-size: 24px;
    line-height: 40px;
  }

  .cookieContent p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 15px;
  }

  .cookieButton {
    height: 30px;
  }
}
