// Default styles.
@include body-class(true) {

  .dashui-switch-free-notice {
    padding: 10px;
    border-radius: $border-radius;
    background: rgba(40, 110, 250, 0.1);
    text-align: center;
    margin-bottom: 10px;

    &__content {

      p {
        margin: 15px 0;
        color: #333;
        font-size: 13px;

        &:first-of-type {
          margin-top: 15px;
        }

        &:last-of-type {
          margin-bottom: 15px;
        }

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      &-btn {
        background: #286EFA !important;
        margin-left: 10px !important;

        &:hover,
        &:focus {
          background: #2159C0 !important;
        }

        &:focus {
          box-shadow: 0 0 0 2px #A3C0FF !important;
        }

        @include media(max-width, md) {
          width: 100% !important;
          display: block !important;
          margin: 0 0 #{$sui-gutter-md / 2} !important;
        }
      }
    }
  }
}

// RTL support.
@include body-class(true, true) {

  .dashui-switch-free-notice {

    @include media(min-width, md) {
      text-align: right;
    }

    &__content {

      @include media(min-width, md) {
        padding-left: 0;
        padding-right: #{$sui-gutter + 10px};
      }
    }
  }
}

// Monochrome support.
@include body-class(true, false, true) {

  .dashui-switch-free-notice {
    border: 1px solid #000; // $black
    background: #fff; // $white

    &__content {

      p {
        color: #000; // $black
      }

      &-btn {
        background: #000 !important; // $black

        &:focus {
          box-shadow: 0 0 0 2px #ddd !important;
        }
      }
    }
  }
}