// Notification Badge
//================================================== //

.notification-badge-container {
  display: inline-flex;
  position: relative;
  vertical-align: middle;

  .icon {
    width: 18px;
  }

  .notification-dot {
    border-radius: 4px;
    flex-wrap: wrap;
    height: 6px;
    position: absolute;
    width: 6px;

    &.notification-dot-neutral {
      background-color: $ids-color-palette-slate-50;

      &.has-label {
        background-color: $ids-color-palette-slate-20;
      }
    }

    &.notification-dot-alert {
      background-color: $ids-color-status-danger;
    }

    &.notification-dot-warning {
      background-color: $ids-color-status-warning;
    }

    &.notification-dot-yield {
      background-color: $ids-color-status-caution;
    }

    &.notification-dot-complete {
      background-color: $ids-color-status-success;
    }

    &.notification-dot-progress {
      background-color: $ids-color-brand-primary-alt;
    }

    &.notification-dot-caution {
      background-color: $ids-color-palette-amethyst-60;
    }

    &.notification-dot-upper-right {
      right: 6px;
      top: -12px;
      transform: scale(1) translate(50%, -50%);
      transform-origin: 100% 0%;

      &.has-label {
        right: 4px;
        top: -17px;

        &.label-wide {
          right: 0;
        }
      }
    }

    &.notification-dot-upper-left {
      top: -12px;
      left: -19px;
      transform: scale(1) translate(-50%, -50%);
      transform-origin: 0% 0%;

      &.has-label {
        right: 3px;
        left: unset;
        top: -17px;

        &.label-wide {
          right: -6px;
        }
      }
    }

    &.notification-dot-lower-right {
      top: -5px;
      left: -12px;
      transform: scale(1) translate(50%, 50%);
      transform-origin: 100% 100%;

      &.has-label {
        top: -3px;
        transform:  scale(1) translate(0, 0);

        &.label-wide {
          left: -14px;
        }
      }
    }

    &.notification-dot-lower-left {
      top: -5px;
      left: -19px;
      transform: scale(1) translate(-50%, 50%);
      transform-origin: 0% 100%;

      &.has-label {
        top: -12px;
        left: -20px;

        &.label-wide {
          left: -24px;
        }
      }
    }

    &.is-disabled {
      display: none;
    }
  }
}

.notification-dot {
  &.has-label {
    display: flex;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &.label-wide {
      border-radius: 99px;
      width: 29px;
    }

    .notification-dot-label {
      color: $ids-color-palette-white;
    }

    &.notification-dot-warning,
    &.notification-dot-complete,
    &.notification-dot-yield,
    &.notification-dot-neutral {
      .notification-dot-label {
        color: $ids-color-palette-black;
      }
    }
  }
}

html[dir='rtl'] {
  .notification-badge-container {
    .notification-dot {
      &.notification-dot-upper-left.has-label {
        right: unset;
        left: 21px;

        &.label-wide {
          left: 25px;
        }
      }

      &.notification-dot-upper-right {
        right: -6px;
      }

      &.notification-dot-upper-right.has-label {
        right: -4px;

        &.label-wide {
          right: 0;
        }
      }

      &.notification-dot-lower-left.has-label {
        left: 21px;

        &.label-wide {
          left: 25px;
        }
      }

      &.notification-dot-lower-right.has-label {
        left: -5px;

        &.label-wide {
          left: -14px;
        }
      }
    }
  }
}