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

  .dashui-expired-box {
    margin: 0 0 $sui-gutter-md;
    padding: $sui-gutter-md;
    border-radius: $border-radius;
    background: #fff; // $white
    text-align: center;

    @include media(min-width, md) {
      position: relative;
      margin-bottom: $sui-gutter;
      padding: $sui-gutter 20%;
    }

    &__text {
      margin-top: 0 !important;
      margin-bottom: 15px !important;
    }

    &__refresh {
      margin-right: 0 !important;
      color: #666 !important;

      @include media(max-width, md) {
        width: 100% !important;
        display: block !important;
        margin-top: -5px;
        margin-bottom: 15px !important;
      }

      @include media(min-width, md) {
        position: absolute !important;
        z-index: 1;
        top: 16px;
        right: 6px;
      }

      &.sui-button-onload-text {
        color: #aaa !important;
      }
    }

    &__action {

      @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-expired-box {

    &__refresh {
      margin-right: 0 !important;

      .sui-loading-text {

        [class*="sui-icon-"] {
          margin-right: -7px;
          margin-left: 0;
        }
      }

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

    &__action {

      &:not(:last-child) {

        @include media(min-width, md) {
          margin-left: 10px;
          margin-right: 0;
        }
      }
    }
  }
}

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

  .dashui-expired-box {
    border: 1px solid #000; // $black

    &__refresh {

      &,
      &:hover,
      &:focus {
        background: transparent !important;
        color: #000 !important; // $black

        [class*="sui-icon-"]:before {
          color: #000 !important; // $black
        }
      }
    }
  }
}