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

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

    @include media(min-width, md) {
      position: relative;
      padding: $sui-gutter $sui-gutter-md;
      text-align: left;
    }

    &__icon {
      margin: 0 auto $sui-gutter-md;
      padding: 5px;
      border-radius: 100%;
      background: #fff; // $white
      color: #1A1A1A;

      &:before {
        display: block;
        color: inherit;
      }

      @include media(min-width, md) {
        position: absolute;
        left: 20px;
        margin: 0;
      }
    }

    &__content {

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

      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;

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

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

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

  .dashui-switch-free-box {

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

    &__icon {

      @include media(min-width, md) {
        left: auto;
        right: 20px;
      }
    }

    &__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-box {
    border: 1px solid #000; // $black
    background: #fff; // $white

    &__icon {
      border: 1px solid #000; // $black
      color: #000; // $black
    }

    &__content {

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

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

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