/**
 * Cookie Banner
 * --------------------------------------------------
 */

.cookie-overlay,
.cookie-jar {
  font-family:      'Source Sans Pro', sans-serif;
  background-color: @cookie-bg;
  color:            @cookie-fg;
  padding:          1em 0;
}

.cookie-overlay {
  display:          flex;
  align-items:      center;
  min-width:        480px;
  min-height:       270px;
}
@media (min-width: @screen-md-min) {
  .cookie-overlay {
    min-width:      592px;
    min-height:     333px;
  }
}
@media screen and (max-width: @screen-xs-max) {
  .cookie-overlay .embed-responsive-item {
    min-width:      auto;
    min-height:     auto;
  }
}

/* Added to stop IE11 collapse/blow-out on flex columns */
.cookie-overlay .cookie-container {
  width:            100%;
}

.cookie-heading {
  font-size:        1.35em;
  font-weight:      300;
  margin-top:       0;
  color:            @cookie-fg;
}

.cookie-link,
.cookie-link:active,
.cookie-link:focus,
.cookie-link:hover,
.cookie-link:visited {
  color:            @cookie-link;
}


// cookie radios copied from bootstrap custom-check
.cookie-check {
  display: block;
  min-height: @form-check-min-height;
  padding-left: @form-check-padding-left;
  margin-bottom: @form-check-margin-bottom;

  .cookie-check-input {
    float: left;
    margin-left: (@form-check-padding-left * -1);
  }
}

.cookie-check-input {
  width: @form-check-input-width;
  height: @form-check-input-width;
  margin-top: ((@line-height-base - @form-check-input-width) / 2);
  vertical-align: top;
  background-color: @form-check-input-bg;
  border: @form-check-input-border;
  appearance: none;
  color-adjust: exact; // Keep themed appearance for print

  border-radius: @form-check-radio-border-radius;

  &:active {
    filter: @form-check-input-active-filter;
  }

  &:focus {
    border-color: @form-check-input-focus-border;
    outline: 0;
    box-shadow: @form-check-input-focus-box-shadow;
  }

  &:checked {
    background-color: @form-check-input-checked-bg-color;
    background-repeat: @form-check-input-checked-bg-repeat;
    background-position: @form-check-input-checked-bg-position;
    background-size: @form-check-input-checked-bg-size;
    border-color: @form-check-input-checked-border-color;
    background-image: @form-check-radio-checked-bg-image;
  }
  &:disabled {
    pointer-events: none;
    filter: none;
    opacity: .5;
  }

  // Use disabled attribute in addition of :disabled pseudo-class
  // See: https://github.com/twbs/bootstrap/issues/28247
  &[disabled],
  &:disabled {
    ~ .cookie-check-label {
      opacity: .5;
    }
  }
}

.cookie-check-label {
  margin-bottom: 0;
  cursor: @form-check-label-cursor;
}

.cookie-check-inline {
  display: inline-block;
  margin-right: @form-check-inline-margin-right;
}
// End of Bootstrap copy

// was being overriden in forms.less
input[type="radio"].cookie-check-input {
  margin-top: ((@line-height-base - @form-check-input-width) / 2);
}

.cookie-settings {
  .cookie-control {
    padding: .5rem 1rem .5rem (@form-check-padding-left + 1rem);
    border-radius: .275rem;
    margin: 0 20px 10px 0;
    &:last-child {
      margin-right: 0;
    }
  }
}

.cookie-radio-primary {
  color:            @cookie-btn1-fg;
  background-color: @cookie-btn1-bg;
  border-color:     @cookie-btn1-bd;
}
.cookie-radio-primary:hover,
.cookie-radio-primary:focus,
.cookie-radio-primary:active {
  color:            @cookie-btn1-fg-hover;
  background-color: @cookie-btn1-bg-hover;
  border-color:     @cookie-btn1-bd-hover;
}
.cookie-radio-primary:hover:active,
.cookie-radio-primary:focus:active {
  background-color: @cookie-btn1-bg-active;
  border-color:     @cookie-btn1-bd-active;
}

.cookie-radio-secondary {
  color:            @cookie-btn2-fg;
  background-color: @cookie-btn2-bg;
  border-color:     @cookie-btn2-bd;
}
.cookie-radio-secondary:hover,
.cookie-radio-secondary:focus,
.cookie-radio-secondary:active {
  color:            @cookie-btn2-fg-hover;
  background-color: @cookie-btn2-bg-hover;
  border-color:     @cookie-btn2-bd-hover;
}
.cookie-radio-secondary:hover:active,
.cookie-radio-secondary:focus:active {
  background-color: @cookie-btn2-bg-active;
  border-color:     @cookie-btn2-bd-active;
}

.cookie-actions {
  list-style-type:  none;
  margin-top:       1rem;
  margin-bottom:    0;
  padding-left:     0;
}

.cookie-actions > li {
  margin-bottom:    .4rem;
  margin-right:     .4rem;
  display:          inline-block;
}

@media (min-width: @screen-md-min) {
  .cookie-actions {
    margin-top:     0;
  }
}

.cookie-btn-overlay {
  margin-top:       1rem;
}

.cookie-lid {
  background-color: @cookie-bg;
  color:            @cookie-fg;
  padding:          .5em;
  text-align:       left;
  position:         fixed;
  left:             0;
  bottom:           0;
  z-index:          9999;
}
.cookie-btn.cookie-btn {
  font-family:      'Source Sans Pro', sans-serif;
}

@media print {
  .cookie-overlay,
  .cookie-jar,
  .cookie-lid {
    display:        none;
  }
}

.cookie-btn {
  display:          inline-block;
  position:         relative;
  text-align:       center;
  white-space:      nowrap;
  vertical-align:   middle;
  user-select:      none;
  border:           1px solid transparent;
  padding:          .5rem 1rem;
  border-radius:    .275rem;
  transition:       color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  cursor:           pointer;
  box-shadow:       inset 0 1px 0 rgba(100, 100, 100, 15%), 0 1px 1px rgba(0, 0, 0, 7.5%);
  font-size:        1rem;
  text-decoration:  none;
}
.cookie-btn:active,
.cookie-btn:focus,
.cookie-btn:hover,
.cookie-btn:visited {
  text-decoration:  underline;
}

.cookie-btn:focus {
  outline:          0;
  box-shadow:       0 0 0 .2rem rgba(25, 181, 254, 50%);
}
.cookie-btn:active {
  box-shadow:       inset 0 3px 5px rgba(0, 0, 0, 25%);
}
.cookie-btn:focus:active {
  box-shadow:       0 0 0 .2rem rgba(25, 181, 254, 50%), inset 0 3px 5px rgba(0, 0, 0, 25%);
}
@media screen and (prefers-reduced-motion: reduce) {
  .cookie-btn {
    transition:     none;
  }
}

.cookie-btn-primary {
  color:            @cookie-btn1-fg;
  background-color: @cookie-btn1-bg;
  border-color:     @cookie-btn1-bd;
}
.cookie-btn-primary:hover,
.cookie-btn-primary:focus,
.cookie-btn-primary:active {
  color:            @cookie-btn1-fg-hover;
  background-color: @cookie-btn1-bg-hover;
  border-color:     @cookie-btn1-bd-hover;
}
.cookie-btn-primary:hover:active,
.cookie-btn-primary:focus:active {
  background-color: @cookie-btn1-bg-active;
  border-color:     @cookie-btn1-bd-active;
}
.cookie-btn-primary:disabled {
  opacity: .5;
}

.cookie-btn-secondary {
  color:            @cookie-btn2-fg;
  background-color: @cookie-btn2-bg;
  border-color:     @cookie-btn2-bd;
}
.cookie-btn-secondary:hover,
.cookie-btn-secondary:focus,
.cookie-btn-secondary:active {
  color:            @cookie-btn2-fg-hover;
  background-color: @cookie-btn2-bg-hover;
  border-color:     @cookie-btn2-bd-hover;
}
.cookie-btn-secondary:hover:active,
.cookie-btn-secondary:focus:active {
  background-color: @cookie-btn2-bg-active;
  border-color:     @cookie-btn2-bd-active;
}

.cookie-btn-sm {
  padding:          .25rem .5rem;
  font-size:        .875rem;
  line-height:      1.5;
  border-radius:    .25rem;
}
body {
  padding-bottom:   3rem;
}

.cookie-container {
  display:          block;
  padding-right:    floor((@grid-gutter-width / 2));
  padding-left:     floor((@grid-gutter-width / 2));
  margin-right:     auto;
  margin-left:      auto;
}
@media screen and (min-width: @screen-sm-min) {
  .cookie-container {
    max-width:      90rem;
    padding-left:   @grid-gutter-width;
    padding-right:  @grid-gutter-width;
  }
}

.cookie-row {
  display:          flex;
  flex-wrap:        wrap;
  margin-right:     -floor((@grid-gutter-width / 2));
  margin-left:      -floor((@grid-gutter-width / 2));
}
.cookie-col-double,
.cookie-col-single {
  position:         relative;
  width:            100%;
  /* Prevent columns from collapsing when empty */
  min-height:       1px;
  padding-right:    floor((@grid-gutter-width / 2));
  padding-left:     floor((@grid-gutter-width / 2));
}
@media screen and (min-width: @screen-md-min) {
  .cookie-col-double {
    flex-basis:     0;
    flex-grow:      2;
    /*Add a `max-width` to ensure content within each column does not blow out*/
    /*the width of the column. Applies to IE10+ and Firefox. Chrome and Safari*/
    /*do not appear to require this.*/
    max-width:      100%;
  }
  .cookie-col-single {
    flex-basis:     0;
    flex-grow:      1;
    max-width:      100%;
  }
}
