.state,
a {
  position: relative;

  &:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    box-shadow: 0 0 0 (1*@rem) @state-cover-active-color;
    transform: scale(@state-scale-from);
    .transition-fast();
    pointer-events: none;
  }

  &.circle:after {.circle()}
  &.rounded:after {.rounded()}

  &:hover,
  &.hover {
    &:after {
      box-shadow: 0 0 0 (1*@rem) @state-cover-hover-color;
      background-color: @state-cover-hover-color;
      opacity: @state-cover-hover-opacity;
      transform: scale(1);
    }
  }

  &.focus,
  &:focus {
    outline: none;
    &:after {
      box-shadow: inset 0 0 0 (1*@rem) fade(@color-focus, 40%), 0 0 0 (2*@rem) fade(@color-focus, 40%);
      background-color: @state-cover-focus-color;
      transform: scale(1);
      opacity: @state-cover-focus-opacity;
    }
  }

  .open > &,
  &.open,
  &.active,
  &:active {
    &:after {
      box-shadow: none;
      background-color: @state-cover-hover-color;
      opacity: @state-cover-hover-opacity;
      transform: scale(1);
    }
  }

  &:active {
    &:after {
      box-shadow: inset 0 0 0 (1*@rem) fade(@color-focus, 20%), 0 0 0 (2*@rem) fade(@color-focus, 20%);
      background-color: @state-cover-active-color;
      transform: scale(@state-active-scale);
    }
  }
}

.disabled,
.disabled > a,
[disabled] {
  cursor: not-allowed!important;
  pointer-events: none!important;
  filter: grayscale(100%);
  opacity: @state-disabled-opacity!important;
  box-shadow: none!important;

  &:after {display: none!important}
}

.as-load-indicator,
.loading {
  color: transparent!important;

  > * {visibility: hidden;}

  &:before {
    .spin();
    display: block;
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: (-9*@rem);
    margin-left: (-9*@rem);
    border: (3*@rem) dotted rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1) rgba(255,255,255,.4) rgba(255,255,255,.5) rgba(255,255,255,.6);
    width: (18*@rem);
    height: (18*@rem);
    border-radius: 50%;
    .transition-fast(opacity);
  }

  &.loading-light:before {
    border-color: rgba(0,0,0,.1) rgba(0,0,0,.2) rgba(0,0,0,.3) rgba(0,0,0,.4);
  }
}

.as-load-indicator {
  &:before {
    opacity: 0;
    animation: none;
  }

  &.loading:before {
    opacity: 1;
    .spin();
  }
}