@use "../../00-base/00-config/00-variables" as *;
@use "../../00-base/01-helpers" as *;
@use "../../01-atoms/01-links/00-link/link-helpers" as *;
@use "../../01-atoms/06-buttons/buttons-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Cookie policy
// *
////////////////////////////////////////////////////////////////////////////////


// *
// =============================================================================

.cookie-policy {
  position: fixed;
  right: 0;
  bottom: rem(-200);
  left: 0;
  padding: rem(15) 0;
  color: hsl(var(--clr-white));
  background: hsl(var(--clr-spot-3));
  transition: all $duration $easing;
  @include z-index(cookie);

  .cookiePolicy-is-visible & {
    bottom: 0;
  }
}

.cookie-policy__message {
  span {
    display: block;
  }
  a {
    position: relative;
    @include link-underline((color: var(--clr-white), color-hover: var(--clr-white)));
  }
}

.cookie-policy__message--first {
  font-weight: var(--fw-bold);
}

.cookie-policy__dismiss {
  margin-top: rem(20);

  a {
    @include button();
  }
}


// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: tablet & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-sm {
  .cookie-policy {
    padding: rem(25) 0;

    .container {
      display: flex;
    }
  }
  .cookie-policy__message {
    flex-grow: 1;
  }
  .cookie-policy__dismiss {
    margin-top: rem(3);
  }
}
