@import "./styles";
@import "../../styles/animation";

.icon {
  @extend %caIcon;
}

.inheritSize {
  @extend %caIconInheritSize;
}

.blockLayout {
  @extend %caIconBlockLayout;
}

.interactiveIconWrapper {
  .icon {
    opacity: 0.5;
    transition: $ca-duration-fast opacity;
  }
  &:disabled,
  &.disabled {
    .icon {
      opacity: 0.3;
    }
  }
  &:not(:disabled):not(.disabled) {
    &:hover,
    &:focus,
    &.hover {
      .icon {
        opacity: 0.7;
      }
    }
    &:active,
    &.active {
      .icon {
        opacity: 1;
      }
    }
  }
}

// On dark backgrounds, icons are fully opaque by default and half opacity when active.
// Hover and disabled states are the same.
.reversedInteractiveIconWrapper {
  composes: interactiveIconWrapper;
  .icon {
    opacity: 1;
  }
  &:not(:disabled, .disabled) {
    &:active,
    &.active {
      .icon {
        opacity: 0.5;
      }
    }
  }
}