// ============================================================================
// :: Cookie banner
// ============================================================================
/**
 * This component is used to represent the cookie banner.
 * This includes a title, a content block and a close button.
 */

// ============================================================================
// :: Root
// ============================================================================
.o-cookie-banner {
  position: fixed;
  bottom: 0;
  z-index: $z-index-atmosphere;

  width: 100%;
  padding: 2rem 0 3rem;
  pointer-events: none;

  background-color: $primary-color-base;

  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out,
    visibility 0s 0.3s ease-in-out;
}

// =============================================================================
// :: Elements
// =============================================================================
.o-cookie-banner__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: auto;
}

.o-cookie-banner__content {
  width: 90%;

  color: $text-color-white;

  /**
  * No link component available. Default a tag styling needs to be
  * overwritten in order to achieve an inverted version of the a tag styling.
  */
  a {
    color: $text-color-white;
  }
}

.o-cookie-banner__title {
  margin-bottom: 1rem;

  @include respond-at($breakpoint-tablet-default) {
    margin-bottom: 1.5rem;
  }
}

// ============================================================================
// :: States
// ============================================================================
.is-hidden {
  opacity: 0;
  visibility: hidden;

  transform: translateY(2rem);
}