@import '../colors';
@import '../font';
@import '../size';
@import 'visuals';

.icon-mixin(@fontface) {
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  color: @admin-dark-gray;

  &:before,
  &:after {
    font-family: @fontface, monospace !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.app-icon-mixin(@hideText: false, @invertIcon: false) {
  .home-button {
    display: flex;
    height: 100%;
    font-family: @admin-font-family;
    color: @admin-bg-light-gray;
    z-index: 1;
    white-space: nowrap;

    .app-icon {
      width: 25px;
      height: @app-header-height;

      & when (@invertIcon = true) {
        filter: invert(100%);
      }

    }
    .app-name {
      font-size: 15px;
      text-transform: uppercase;
      line-height: @app-header-height;

      & when (@hideText = true) {
        display: none;
      }
    }

    &.clickable {
      &:hover {
        opacity: 0.5;
      }
      cursor: pointer;
    }
  }
}

.icon-close-mixin(@right: 0) {
  .icon-close {
    .focusable();
    position: absolute;
    top: 50%;
    right: @right;
    margin-top: -6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
  }
}

.icon-alert() {
  &::before {
    content: "!";
    display: block;
    background-color: @admin-red;
    color: @admin-white;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    font-size: 14px;
  }
}