@import 'colors.css';

#htmlCookieNotice {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--cookie-notice-background-dark);
    color: var(--cookie-notice-color-light);
    text-align: center;
    font-size: smaller;
    z-index: 999;
}

.cookieCollapseWrapper {
  max-width: 25rem;
  margin: 0 auto 0.5rem auto;
  box-sizing: border-box;
  width: 100%;
  font-size: smaller;
}

.collapseButton {
  background-color: var(--cookie-notice-color-light);
  color: var(--cookie-notice-background-dark);
  cursor: pointer;
  width: 100%;
  border: 0.063rem solid var(--cookie-notice-background-dark);
  border-bottom: none;
  text-align: left;
  outline: none;
  border-radius: 0.5rem 0.5rem 0 0;
  transition: background 0.2s;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem 1rem;
  position: relative;
}

.collapseButtonContent {
  display: none;
  width: 100%;
  background-color: var(--cookie-notice-color-light);
  color: var(--cookie-notice-background-dark);
  text-align: left;
  border: 0.063rem solid var(--cookie-notice-background-dark);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0.25rem 1rem;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.active, .collapseButton:hover {
  background-color: var(--cookie-notice-color-dark);
}

/* Add arrow indicator to button */
.collapseButton::after {
  content: '\25BC';
  color: var(--cookie-notice-background-dark);
  float: right;
  margin-left: 1rem;
  transition: transform 0.2s;
}
.active::after {
  transform: rotate(180deg);
}

#htmlCookieNotice .cookieNoticeButton {
    border: none;
    padding: 1vh 2vh;
    margin: 1vh;
    cursor: pointer;
}
#htmlCookieNotice #htmlAcceptCookies {
    background-color: var(--green);
    color: var(--cookie-notice-color-light);
}

#htmlCookieNotice #htmlDeclineCookies {
    background-color: var(--cookie-notice-color-dark);
    color: var(--cookie-notice-color-light);
}