// Message to notify the user that they are on the mobile responsive site and a button to allow the user to "opt out" or switch between the mobile responsive site and the fixed desktop site.
//
// Styleguide Opt out bar

.opt-out {
  @extend %clearfix;
  background-color: $color-opt-out-background;

  &.is-hidden {
    display: none;
  }
}

.opt-out__message {
  @extend %type-small;
  margin: $baseline-unit*2 0 0 0;

  @include respond-to($mq-m) {
    float: left;
  }
}

.opt-out__button {
  @extend %type-small;
  @extend .button--unstyled;
  padding: $baseline-unit*2 $baseline-unit;
  color: $color-link-default;

  &:hover,
  &:focus {
    outline: 0;
    text-decoration: underline;
  }
}

.opt-out__close {
  position: absolute;
  top: 0;
  right: 0;
}

.opt-out__close__button {
  @extend .button--unstyled;
  padding: $baseline-unit*2;
}



// Message to notify the user that they are on the mobile responsive site and a button to allow the user to "opt out" or switch between the mobile responsive site and the fixed desktop site.
//
// Styleguide Opt out bar

.opt-out {
  @extend %clearfix;
  background-color: $color-opt-out-background;

  &.is-hidden {
    display: none;
  }
}

.opt-out__message {
  @extend %type-small;
  margin: $baseline-unit*2 0 0 0;

  @include respond-to($mq-m) {
    float: left;
    min-width: 310px;
  }
}

.opt-out__button {
  @extend %type-small;
  @extend .button--unstyled;
  padding: $baseline-unit*2 $baseline-unit;
  color: $color-link-default;

  &:hover,
  &:focus {
    outline: 0;
    text-decoration: underline;
  }
}

.opt-out__close {
  position: absolute;
  top: 0;
  right: 0;
}

.opt-out__close__button {
  @extend .button--unstyled;
  padding: $baseline-unit*2;
}



Add min-width to control optout message on desktop
Add min-width to control optout message on desktop
