@import "variables";
@import "mixins";

#cookie-consent {
  position: sticky;
  bottom: 0;
  background-color: $footer-bg;
  color: $footer-color;
  z-index: 100000;

  .wrp {
    // display: flex;
    // flex-direction: row;
    max-width: (50rem * 1.6);
    margin: auto;
    padding: (2rem * 1.6) (1rem * 1.6);
    .desc,
    .desc p {
      @include p-small;
      font-weight: 300;
      text-align: justify;
    }
    .title,
    .title p {
      font-weight: 300;
      color: $footer-color;
    }
    .btns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      column-gap: (1rem * 1.6);
      row-gap: (1rem * 1.6);
      margin-top: (2rem * 1.6);

      @include bp("sm") {
        grid-template-columns: 1fr;
      }

      .btn-enable {
        order: 1;
      }
    }
  }
}

#cookie-consent .settings form,
#cookie-settings.form {
  .section {
    display: flex;
    flex-flow: row wrap;

    .title {
      flex-grow: 1;
      cursor: pointer;
    }
    .arrow {
      border: solid $col-prm;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 3px;
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transition: 0.4;
      &.up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transition: 0.3;
      }
    }
    .desc {
      width: 100%;
    }
  }
}
