@use "sass:map" as map;
@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

.cookie-container{
  color: func.color(vars.$cookie-message-text-color);
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: vars.$zindex-cookie-message;
  margin-bottom: func.units(3);
  margin-left: func.units(3);
  margin-right: func.units(3);

  .cookie-message{
    @include mixins.grid-container;
    background-color: func.color(vars.$cookie-message-background-color);
    border: func.border(vars.$cookie-message-border);
    box-shadow: func.shadow('heavy');
    padding-top: calc(#{func.units(6)} - 1px);
    padding-bottom: calc(#{func.units(7)} - 1px);
    position: relative;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: func.border-radius('medium');

    p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
      color: func.color(vars.$cookie-message-text-color);
    }


    @include mixins.media-breakpoint-up(xl) {
      max-width: calc(#{map.get(vars.$container-max-widths, xl)} + #{func.units(7)} + #{func.units(7)});
    }

    .cookie-text, .cookie-actions{
      @include mixins.media-breakpoint-up(xl) {
        padding-left: func.units(7);
        padding-right: func.units(7);
      }
    }
    .cookie-actions{
      margin-top: func.units(4);
    }
  }
}