.heading {
  @include typography(heading, 300, default);
  color: var(--color-content-strong);
  user-select: none;
}

.body {
  color: var(--color-content-default);
  @include typography(text, 200, regular);
  user-select: none;

  a {
    text-decoration: underline;
    transition: var(--transition-fast);
    transition-property: color;

    &:hover {
      color: var(--color-content-strong);
    }
  }
}

.wrapper {
  background: var(--color-background-static-muted);
  padding: 24px;
  padding-left: 40px;
  display: flex;
  gap: 24px;
  position: relative;
  width: 100%;
  z-index: var(--z-index-cookie-banner);
  left: 0;

  @media (max-width: 800px) {
    flex-direction: column;
    padding: 16px;
  }

  &.isOnTop {
    box-shadow: inset 0 -1px 0 0 var(--color-border-default);
    top: -1px;
    padding-top: 25px;

    @media (max-width: 800px) {
      padding-top: 17px;
    }
  }

  &.isOnBottom {
    box-shadow: inset 0 1px 0 0 var(--color-border-default);
    bottom: -1px;
    padding-bottom: 25px;

    @media (max-width: 800px) {
      padding-bottom: 17px;
    }
  }

  &.isFixed {
    position: fixed;
  }

  &.isSticky {
    position: sticky;
  }
}

.textWrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.buttonsWrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}
