//------------------------------------\
//  GLOBAL CLASSES
//------------------------------------/

html {
  width: 1px;
  min-width: 100%;
  // sass-lint:disable-block no-disallowed-properties
  font-size: 62.5% !important;
}

body {
  @include a-fontReg;
  @include a-fontSize16;
  color: $black;
  letter-spacing: $font-letter-spacing;
  background-color: $grey-light;
}

// Selection style
::selection,
.a-searchSelected {
  color: $black;
  background: $purple-light;
}

/* Flexible Media */
img,
video,
object {
  max-width: 100%;
  height: auto;
  border: none;
}

// Dim background
.a-dimBackground {
  background: $black-opacity-03;
}

.a-mt-filter {
  margin-top: $spacer * 3;

  @include media-breakpoint-up( lg ) {
    margin-top: 151px;
  }
}


// Disabled background
.a-disabled {
  @include disabled-background ( $background-image: url($images-base-url+'disabled-background.svg') );

  &.a-primary {
    color: $grey;
    cursor: not-allowed;
    background-color: $blue-light !important;
  }

  &.a-danger,
  &.a-deleted {
    color: $grey;
    cursor: not-allowed;
    background-color: $red-light !important;
  }

  &.a-success,
  &.a-completed {
    color: $grey;
    cursor: not-allowed;
    background-color: $green-light !important;
  }
}

// Panels with background-color
.a-bgPanel {
  padding: $spacer * 2;
  margin-bottom: $spacer;
  background-color: $white;
  border-radius: 0;
  box-shadow: $shadow;

  &.a-bgPanel-grey {
    background-color: $grey-light;
  }

  &.a-bgPanel-blueLight {
    background-color: $blue-light;
  }
}

// Placeholder background
.a-placeholderBackground {
  background-image: url($images-base-url + '/brick_pattern.svg');
  background-repeat: repeat;
  background-size: 13%;
  background-blend-mode: multiply;
}

/* Shadow */
.a-shadow {
  box-shadow: $shadow;
}

// Dropdown-menu with arrow
.a-dropdownTriangle {
  box-sizing: border-box;
  background: $white;
  box-shadow: 2px 2px 9px 0 $black-opacity-04;

  &::after {
    position: absolute;
    top: 1px;
    bottom: 100%;
    left: 50%;
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin-left: 130px;
    content: '';
    border: 8px solid $black;
    border-color: transparent transparent $white $white;
    box-shadow: -2px 2px 3px 0 $black-opacity-01;
    transform: rotate(135deg);
    transform-origin: 0 0;

    @include media-breakpoint-down(md) {
      left: 5%;
    }
    @include media-breakpoint-down(sm) {
      left: -15%;
    }
  }

  &[x-placement='top-start'] {
    &::after {
      top: calc( 100% - 1px );
      left: 40%;
      transform: rotate(-45deg);
    }
  }


  &[x-placement='top-end'] {
    &::after {
      top: calc( 100% - 1px );
      left: 40%;
      transform: rotate(-45deg);

      @include media-breakpoint-down(md) {
        left: -2%;
      }

      @include media-breakpoint-down(sm) {
        left: -23%;
      }
    }
  }
}

/* Shadow arrow */
// Dropdown-menu with arrow
.a-triangleShadow {
  &::after {
    position: absolute;
    top: 1px;
    bottom: 100%;
    left: 50%;
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin-left: 130px;
    content: '';
    border: 8px solid $black;
    border-color: transparent transparent $white $white;
    box-shadow: -2px 2px 3px 0 $black-opacity-01;
    transform: rotate(135deg);
    transform-origin: 0 0;
  }
}



/* Anchor links */

.anchorjs-link {
  position: relative !important;
  display: inline-block;
  width: 1em;
  line-height: 10px !important;
  border-bottom: none !important;
}

/* Horizontal Rule */

hr {
  height: 2px;
  margin: 40px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid $grey-medium;

  &.a-hr-smallPadding {
    margin: 24px 0;
  }

  &.a-hrLight {
    border-bottom: 1px solid $grey-light;
  }

  &.a-hrSolidThick {
    margin: 0 0 $spacer 0;
    border-bottom: 4px solid $blue;
  }

  &.a-hrSolidLight {
    margin: $spacer * 0.5 0 0 0;
    border-bottom: 2px solid $blue;
  }
}


// Horizontal Rule - Dotted border
.a-dotted {
  background-image: $dotted-border-blue;
  background-repeat: repeat-x;
  background-position: 25px bottom;
  background-size: 4px 2px;

  /* Horizontal Rule - Dotted AND disabled */
  &.a-disabled {
    @include disabled-background( $box-shadow: none, $background-image: url( $images-base-url+'disabled-background.svg' ), $background-image-extra: linear-gradient( to right, $blue 50%, $white 0% ) );

    background-repeat: repeat, repeat-x;
    background-position: 25px bottom;
    background-size: auto, 4px 2px;

    background-blend-mode: darken;

    &.a-primary {
      color: $grey;
      background-color: $blue-light;
    }

    &.a-success {
      color: $grey;
      background-color: $green-light;
    }

    &.a-danger {
      color: $grey;
      background-color: $red-light;
    }
  }

  &.a-info {
    background-color: $yellow-light;
  }

  .popover-big & {
    color: $black;
    background-image: $dotted-border-black;
  }
}

.a-dotted-line {
  display: block;
  width: 100%;
  height: 2px;
  background-image: $dotted-border-blue;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 4px 2px;
}

.a-dotted-line-top {
  background-image: $dotted-border-blue;
  background-repeat: repeat-x;
  background-position: top;
  background-size: 4px 2px;
}

.a-borderSolid {
  border: 1px solid $grey-light;
}

.a-borderSolidDark {
  border: 1px solid $grey-medium;
}

.a-borderTop {
  border-top: 1px solid $grey-light;
}

.a-borderBottom {
  border-bottom: 1px solid $grey-light;
}

.a-borderTopDark {
  border-top: 1px solid $grey-medium;
}

.a-borderBottomDark {
  border-bottom: 1px solid $grey-medium;
}

// SR-only
.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 5px;
    padding-left: 10px;
    margin: 0;
    overflow: visible;
    clip: auto;
    // font-size: small; ?
    // font-weight: bolder; ?
    text-decoration: underline;
    background-color: $white;
    border-bottom: none;
  }
}

// Full width
.a-fullWidthXs {
  width: 100%;
}

// Display block
.a-displayBlock {
  display: block;
}

// Height *3
.a-height-3x {
  height: $spacer * 3;
  line-height: $spacer * 3;
}

// Border bottom
.a-border-bottom {
  border-bottom: 2px solid $grey-light;

  &.a-no-border-small {
    @include media-breakpoint-down( sm ) {
      border-bottom: none;
    }
  }
}

// No pointer
.a-noPointer {
  pointer-events: none;
  cursor: default;
}

// Clickable/Selectable
.a-clickable,
.a-selectable {
  &.a-focus,
  &:hover,
  &:active,
  &:focus {
    &:not(.a-expanded) {
      &:not(.a-deleted) {
        &:not(.a-completed) {
          &:not(.a-defaultCursor) {
            cursor: pointer;
            // background-color: $blue-light;

            &.a-primary {
              background-color: $blue-light;
            }

            &.a-success {
              background-color: $blue-light;
            }

            &.a-danger {
              background-color: $red-light;
            }
          }
        }
      }
    }
  }
}

// If background dark color
.a-jumbotron-dark {
  .a-clickable,
  .a-selectable {
    &:hover,
    &:active,
    &:focus {
      &:not(.a-expanded) {
        &:not(.a-deleted) {
          &:not(.a-completed) {
            cursor: pointer;
            background-color: $white-opacity-005;
            box-shadow: none;
          }
        }
      }
    }
  }
}

.a-deleted,
.a-completed {
  .row {
    &.a-selectableExpanded {
      &:hover,
      &:active,
      &:focus {
        cursor: default;
        background-color: transparent;
      }
    }
  }
}

.row {
  &.a-selectableExpanded {
    &:hover,
    &:active,
    &:focus {
      cursor: pointer;
      background-color: $blue-light;
    }
  }
}

.arrow-tr {
  position: relative;
  z-index: 9999;
  background: none;

  &::before {
    position: absolute;
    top: -72px;
    right: $spacer * 0.5;
    bottom: 100%;
    width: 0;
    height: 0;
    margin-left: -18px;
    pointer-events: none;
    content: ' ';
    border: solid transparent;
    border-width: 18px;
    border-bottom-color: $grey-light;
  }
}

.a-hiddenRow {
  display: none;
}

.a-disabledIcon {
  color: $grey-medium;
}

.a-iconStrikeThrough {
  padding-left: 3px;
  overflow-wrap: normal;

  &::after {
    position: relative;
    left: -14px;
    //font-weight: 900;
    color: $black;
    content: '\\';

    @media all and (-ms-high-contrast: none),
      (-ms-high-contrast: active) {
        position: static;
    }
  }

  &.a-disabledIcon {
    color: $grey-medium;
  }

  &.a-redIcon {
    color: $red;
  }
}

.ai-sm {
  &.a-iconStrikeThrough {
    &::after {
      position: relative;
    }
  }
}

.a-selectable {
  &.a-selected {
    &.a-success {
      background-color: $green-light;
    }

    .a-hiddenWhenSelected {
      display: none;

      @include media-breakpoint-up( sm ) {
        display: none !important;
      }
    }

    .a-visibleWhenSelected {
      display: inline-block;

      @include media-breakpoint-up( sm ) {
        display: inline-block !important;
      }

      &.a-displayInlineBlock {
        display: inline-block !important;
      }
    }
  }

  .a-visibleWhenSelected {
    display: none;

    @include media-breakpoint-up( sm ) {
      display: none !important;
    }

    &.a-displayInlineBlock {
      display: inline-block !important;
    }
  }

  &.a-completed {
    background-color: $green-light;

    &:hover {
      cursor: default;
    }

    .a-hiddenWhenCompleted {
      display: none;
    }

    .a-visibleWhenCompleted {
      display: inline-block;

      @include media-breakpoint-up( sm ) {
        display: inline-block !important;
      }

      &.a-displayInlineBlock {
        display: inline-block !important;
      }
    }
  }

  &.a-deleted {
    background-color: $red-light;

    &:hover {
      cursor: default;
    }

    .a-hiddenWhenDeleted {
      display: none !important;
    }

    .a-visibleWhenDeleted {
      display: inline-block;

      @include media-breakpoint-up( sm ) {
        display: inline-block !important;
      }

      &.a-displayInlineBlock {
        display: inline-block !important;
      }
    }
  }

  &.a-expanded {
    background-color: $white;
  }

  &.a-disabled {
    &:hover {
      cursor: not-allowed !important;
    }

    .a-hiddenWhenDisabled {
      display: none;
    }

    .a-visibleWhenDisabled {
      display: inline-block;

      @include media-breakpoint-up( sm ) {
        display: inline-block !important;
      }

      &.a-displayInlineBlock {
        display: inline-block !important;
      }
    }
  }

  &:not(.a-selected) {
    &:not(.a-expanded) {
      &:not(.a-completed) {
        &:not(.a-deleted) {
          .a-visibleWhenInitial {
            display: inline-block !important;
          }
        }
      }
    }
  }

  .a-visibleWhenCompleted,
  .a-visibleWhenDeleted,
  .a-visibleWhenInitial,
  .a-visibleWhenDisabled {
    display: none !important;
  }
}

.a-lineThrough {
  text-decoration: line-through;
}

.a-hiddenWhenExpanded {
  .a-expanded & {
    display: none;
  }
}

.a-visibleWhenExpanded {
  display: none;

  .a-expanded & {
    display: inline-block;
  }
}

.a-noUnderline {
  padding-bottom: 0;
  border: none;

  &:hover,
  &:focus {
    border: none;
  }
}

/*------------------------------------*\
    $Full width and height elements in modal
\*------------------------------------*/

.a-full-width {
  @include media-breakpoint-up( md ) {
    margin-right: -$spacer * 7;
    margin-left: -$spacer * 7;
  }
  @include media-breakpoint-up( lg ) {
    margin-right: -$spacer * 8;
    margin-left: -$spacer * 8;
  }

  margin-right: -$spacer;
  margin-left: -$spacer;
}

.a-full-height {
  @include media-breakpoint-up( md ) {
    margin-bottom: -$spacer * 4;
  }

  margin-bottom: -$spacer * 3;
}

.a-maxThreeLines2 {
  p {
    display: -webkit-box;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.a-p-static {
  position: static !important;
}

.a-p-relative {
  position: relative;
}

.a-overflow-auto {
  overflow: auto;
}

.a-overflow-hidden {
  overflow: hidden;
}