// Icons and Icon Buttons
//================================================== //

// Svg Styles
.icon {
  color: $icon-color-fill;
  display: inline-block;
  height: 18px;
  width: 18px;
  position: relative;

  &.icon-round {
    border-radius: 50%;
    border: 2px solid;
    width: 26px;
    height: 26px;
  }
}

.icon-status {
  display: inline-flex;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;

  .icon {
    top: 0;
    height: 18px;
    width: 18px;
  }
}

//Glyphs on the Header
.header .icon {
  color: $ids-color-palette-white;
}

// Specific Icon Types
.icon-error,
.icon-success,
.icon-alert,
.icon-info,
.icon-warning,
.icon-caution,
.icon-info-field,
.icon-in-progress,
svg.icon-dirty,
.icon-new,
.icon-pending,
.icon-empty-circle,
.icon-half-empty-circle,
.icon-rejected-outline,
.icon-rejected-solid {
  position: relative;
  top: 10px;
  vertical-align: top;

  &.icon-round,
  &.icon-status {
    top: 0;
  }
}

.icon-info-field {
  color: $ids-color-brand-primary-base;
}

.field {
  .icon-error,
  .icon-success,
  .icon-alert,
  .icon-info,
  .icon-pending {
    margin-top: -1px;
    position: absolute;
    top: inherit;
    margin-inline-start: -14px;
  }

  .icon-error.lower-opacity {
    opacity: 0.3;
    z-index: -1;
  }

  .icon-success {
    height: 18px;
    margin-top: -2px;
    position: relative;
    right: auto;
    top: auto;
  }

  [data-error-type='tooltip'] ~ .icon-error,
  [data-error-type='tooltip'] ~ .icon-success {
    position: relative;
    inset-inline-end: 12px;
    top: -1px !important;
  }
  
  @media (max-width: 346px) {
    [data-error-type='tooltip'] ~ .icon-error,
    [data-error-type='tooltip'] ~ .icon-success {
      inset-inline-end: 12px;
      position: absolute;
      top: 40px !important;
    }
  }

  .dropdown-wrapper {
    [data-error-type='tooltip'] ~ .icon-error,
    [data-error-type='tooltip'] ~ .icon-success {
      position: absolute;
      right: 25px;
      top: 10px !important;
    }
  }

  &.editor-container {
    [data-error-type='tooltip'] ~ .icon-error,
    [data-error-type='tooltip'] ~ .icon-success {
      position: absolute;
      right: 10px;
      top: 55px;
    }
  }

  textarea {
    &[data-error-type='tooltip'] ~ .icon-error,
    &[data-error-type='tooltip'] ~ .icon-success {
      position: absolute;
      top: 20px;
    }
  }

  .lookup-wrapper {
    .icon-error,
    .icon-success {
      inset-inline-end: 32px;
      top: 11px !important;
      position: absolute;
    }
  }

  .popover-trigger {
    .icon-info {
      height: 14px;
      position: relative;
      top: -2px;
      width: 14px;
    }
  }

  .icon {
    vertical-align: middle;
  }
}

.icon-dirtyerror,
.icon-error,
.icon-error-alert,
.icon-rejected-outline,
.icon-rejected-solid {
  color: $ids-color-status-danger !important;
}

.icon-info,
.icon-info-alert,
.icon-status {
  color: $badge-info-bg-color;
}

.icon-success,
.icon-good,
.icon-success-alert {
  color: $success-icon-fill !important;
}

.icon-empty-circle,
.icon-half-empty-circle {
  color: $icon-neutral-color;
}

.icon-alert,
.icon-alert-alert,
.icon-warning {
  color: $ids-color-status-warning !important;
}

.icon-caution {
  color: $ids-color-status-status-03 !important;
}

.icon-pending {
  color: $ids-color-status-warning !important;
}

.icon-pending-alert {
  color: $ids-color-status-warning !important;
}

svg.icon-close {
  height: 16px !important;
}

.icon-sohoxi {
  color: $inverse-color;
  height: 22px;
  left: -15px;
  top: 5px;
  width: 115px;
}

.icon-favorite {
  svg {
    color: $rating-bg-color !important;
  }
}

//Prevent freezing on IE11 - Win 7 - http://bit.ly/1EW17mx
svg use {
  pointer-events: none;
}

svg.icon-logo {
  height: 34px;
  width: 35px;
}

// Missing fill hack
#icon-logo-dark {
  fill: #000;
}

#icon-logo-dark:first-child {
  fill: #fff;
}

#icon-logo-white {
  fill: #000;
}

#icon-logo-dark:first-child {
  fill: #fff;
}

.icon-dirty {
  @include css3(border-radius, 2px 0 0);

  border-color: $dirty-icon-fill transparent transparent $dirty-icon-fill;
  border-style: solid;
  border-width: 4px;
  height: 0;
  left: 2px;
  margin: 3px 0 0 1px;
  position: absolute;
  width: 0;
  z-index: 1;

  &.is-checked {
    margin: 0;
    z-index: 1;
  }

  &.dirty-checkbox {
    &.is-checked {
      border-width: 4px;
      left: 0;
      top: 0;
      z-index: 2;
    }
  }
}

.inline {
  .icon-dirty {
    margin-top: 8px;

    &.dirty-checkbox {
      left: 0;
      margin-top: inherit;
      top: 1px;

      &.is-checked {
        left: 0;
        top: 1px;
      }
    }
  }
}

.img-placeholder {
  background-color: $image-background-color;
  border: 1px solid $image-border-color;
  border-radius: 2px;
  display: table-cell;
  height: 100px;
  max-height: 100px;
  max-width: 100px;
  min-height: 100px;
  min-width: 100px;
  width: 100px;

  svg {
    color: $ids-color-palette-white;
    display: inline-block;
    height: 45px;
    margin-left: 26px;
    margin-top: 25px;
    position: relative;
    width: 45px;
  }
}

.drilldown.btn-icon {
  border-radius: 0;

  svg {
    height: 22px;
    width: 22px;
  }

  span {
    color: transparent;
  }

  &:hover span {
    color: transparent;
  }
}

svg.icon-dirty {
  color: $dirty-icon-fill;
  height: 12px;
  stroke: $dirty-icon-fill;
  top: 7px;
  width: 12px;
}

.icon-in-progress {
  color: $ids-color-palette-amethyst-60;
}

.icon-new {
  color: $ids-color-palette-amber-70;
}

// Psuedo-element Icons
//================================================== //

.icon.plus-minus {
  display: inline-block;
  position: relative;

  &::before,
  &::after {
    @include css3(transform-origin, 50% 50% 0);
    @include transition(transform 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s);

    background-color: $icon-color;
    border-radius: 2px;
    content: '';
    height: 2px;
    left: 0.65em;
    position: absolute;
    top: 1.4em;
    width: 14px;
  }

  &::before {
    @include css3(transform, rotate(90deg));
  }

  &::after {
    @include css3(transform, rotate(0deg));
  }

  &.active {
    &::before,
    &::after {
      @include css3(transform, rotate(180deg));
    }
  }
}

// Hamburger by default,
// Has different modes based on CSS classes
.icon.app-header {
  span:not(.audible) {
    @include css3(transform-origin, 50% 50% 0);
    @include transition(transform 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s,
    left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
    top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    background-color: $icon-color;
    border-radius: 4px;
    height: 2px;
    position: absolute;
    width: 20px;
  }

  span.one {
    left: 6px;
    top: 8.5px;
  }

  span.two {
    left: 6px;
    top: 14.5px;
  }

  span.three {
    left: 6px;
    top: 20.5px;
  }

  &.go-back {
    span.one {
      @include css3(transform, rotate(-45deg) translateX(-5.75px) translateY(-2.5px) scaleX(0.6));
    }

    span.three {
      @include css3(transform, rotate(45deg) translateX(-5.75px) translateY(2.5px) scaleX(0.6));
    }
  }

  &.close {
    span.one {
      @include css3(transform, rotate(45deg));

      left: 5.5px;
      top: 14.5px;
    }

    span.two {
      @include css3(transform, rotate(45deg));

      left: 5.5px;
      top: 14.5px;
    }

    span.three {
      @include css3(transform, rotate(-45deg));

      left: 5.5px;
      top: 14.5px;
    }
  }
}

[class^='btn'] {
  .icon.app-header {
    height: 32px;
    width: 32px;

    span:not(.audible) {
      background-color: $button-color-tertiary-initial-font;
    }
  }
}

@mixin app-drawer-box() {
  background-color: $icon-color;
  border-radius: 1px;
  display: inline-block;
  height: 4px;
  width: 4px;

  @include css3(transform-origin, 50% 50% 0);
  @include transition(transform 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94) 0s,
  left 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  top 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  height 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  width 350ms cubic-bezier(0.17, 0.04, 0.03, 0.94));
}

// This icon is presumably 18px x 18px - The dimensions defined reflect this
.app-drawer {
  position: relative;

  span:not(.audible) {
    @include app-drawer-box();

    padding: 0;
    position: absolute;
  }

  .one {
    left: 9px;
    top: 7px;
  }

  .two {
    left: 15px;
    top: 7px;
  }

  .three {
    left: 21px;
    top: 7px;
  }

  .four {
    left: 9px;
    top: 13px;
  }

  .five {
    left: 15px;
    top: 13px;
  }

  .six {
    left: 21px;
    top: 13px;
  }

  .seven {
    left: 9px;
    top: 19px;
  }

  .eight {
    left: 15px;
    top: 19px;
  }

  .nine {
    left: 21px;
    top: 19px;
  }

  &.active {
    .one,
    .three,
    .four,
    .five,
    .six,
    .seven,
    .nine {
      height: 0;
      left: 16px;
      top: 14px;
      width: 0;
    }

    .two {
      @include css3(transform-origin, 50% 50% 0);
      @include css3(transform, rotate(45deg));

      height: 2px;
      left: 8px;
      top: 14px;
      width: 18px;
    }

    .eight {
      @include css3(transform-origin, 50% 50% 0);
      @include css3(transform, rotate(45deg));

      height: 18px;
      left: 16px;
      top: 6px;
      width: 2px;
    }
  }
}

// Check Mark Ticks
.icon {
  &.checkmark,
  &.checkmark-selected {
    border: 2px solid $icon-color;
    border-radius: 50%;
    height: 26px;
    width: 26px;

    &::after {
      @include css3(transform, scaleX(-1) rotate(135deg));

      border-color: $icon-color $icon-color $icon-color transparent;
      border-style: solid;
      border-width: 2px 2px 0 0;
      content: '';
      height: 12px;
      left: 7px;
      margin-top: 3px;
      position: absolute;
      width: 5px;
    }
  }

  &.checkmark-selected {
    background-color: $ids-color-brand-primary-base;
    border-color: $ids-color-brand-primary-base;

    &::after {
      border-color: $inverse-color $inverse-color $inverse-color transparent;
    }
  }
}

// Caps Lock
.icon-capslock {
  display: inline;
  height: 24px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 22px;
  width: 24px;
  z-index: 1;
}

.no-animate {
  -moz-transition: none 0s ease 0s !important;
  -webkit-transition: none 0s ease 0s !important;
  transition: none 0s ease 0s !important;
}

.icon-rtl-rotate {
  -ms-filter: fliph;
  filter: fliph;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

// RTL Styles
html[dir='rtl'] {
  .field {
    .icon-error,
    .icon-success,
    .icon-alert,
    .icon-info,
    .icon-pending {
      left: 30px;
      margin-left: -21px;
      margin-right: inherit;
      right: auto;
    }

    .icon-error,
    .icon-success {
      left: auto;
      margin-left: inherit;
      margin-right: -30px;
      right: 0;
    }

    .error-message {
      .icon-error {
        margin-right: inherit;
      }
    }

    .lookup-wrapper {
      .icon-error,
      .icon-success {
        left: 50px;
        margin-left: -20px;
        margin-right: inherit;
        right: auto;
      }
    }
  }

  .icon.app-header {
    &.go-back {
      span.one {
        @include css3(transform, rotate(45deg) translateX(5.75px) translateY(-2.5px) scaleX(0.6));
      }

      span.three {
        @include css3(transform, rotate(-45deg) translateX(5.75px) translateY(2.5px) scaleX(0.6));
      }
    }
  }

  .img-placeholder {
    svg {
      margin-left: inherit;
      margin-right: 26px;
    }
  }

  .icon-dirty:not(.dirty-checkbox) {
    @include css3(border-radius, 2px 0 0);

    border-color: $dirty-icon-fill $dirty-icon-fill transparent transparent;
    left: auto;
    margin: 1px 1px 0 0;
  }
}

.is-firefox {
  .icon-dirty.dirty-checkbox.is-checked {
    left: 0;
    top: 0;
  }
}

html[class*='-dark'] .icon-status {
  background-color: transparent !important;
}

html[class*='-dark'] .icon-status {
  border-color: transparent !important;
}

html[class*='-dark'] .icon-status.slate07-color {
  color: $ids-color-palette-slate-30 !important;
}

// Style Gen Ai Sparkle
symbol [fill="#7928E1"] {
  color: transparent;
  fill: inherit;
}

.lookup-wrapper .icon-error {
  width: 14px;
  height: 14px;
}