zu 0.3.3

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.


/* Styles for Badge */

/* Styles applied to the root element. */
.ZuBadge-root {
  position: relative;
  vertical-align: middle;

  display: inline-flex;
  flex-shrink: 0;
}

/* Styles applied to the badge `span` element. */
.ZuBadge-badge {
  position: absolute;
  z-index: 1;
  transition: transform $zu-easing-easeInOut $zu-duration-enteringScreen 0ms;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  place-content: center;
  box-sizing: border-box;

  font-family: $zu-typography-fontFamily;
  font-weight: $zu-typography-fontWeightMedium;
  font-size: 12px;
  line-height: 1;
}

/* Styles applied to the badge `span` element if variant="dot". */
.ZuBadge-dot {
  border-radius: $zu-badge-radiusDot;
  height: $zu-badge-radiusDot * 2;
  min-width: $zu-badge-radiusDot * 2;
  padding: 0;
}

/* Styles applied to the badge `span` element if variant="standard". */
.ZuBadge-standard {
  min-width: $zu-badge-radiusStandard * 2;
  height: $zu-badge-radiusStandard * 2;
  border-radius: $zu-badge-radiusStandard;
  padding: 0 6px;
}

.ZuBadge-anchorOriginTopLeft {
  &.ZuBadge-overlapCircular {
    top: 14%;
    left: 14%;
    transform: scale(1) translate(-50%, -50%);
    transform-origin: 0 0;

    &.ZuBadge-invisible {
      transform: scale(0) translate(-50%, -50%);
    }
  }

  &.ZuBadge-overlapRect {
    top: 0;
    left: 0;
    transform: scale(1) translate(-50%, -50%);
    transform-origin: 0 0;

    &.ZuBadge-invisible {
      transform: scale(0) translate(-50%, -50%);
    }
  }
}

.ZuBadge-anchorOriginTopRight {
  &.ZuBadge-overlapCircular {
    top: 14%;
    right: 14%;
    transform: scale(1) translate(50%, -50%);
    transform-origin: 100% 0;

    &.ZuBadge-invisible {
      transform: scale(0) translate(50%, -50%);
    }
  }

  &.ZuBadge-overlapRect {
    top: 0;
    right: 0;
    transform: scale(1) translate(50%, -50%);
    transform-origin: 100% 0;

    &.ZuBadge-invisible {
      transform: scale(0) translate(50%, -50%);
    }
  }
}

.ZuBadge-anchorOriginBottomLeft {
  &.ZuBadge-overlapCircular {
    bottom: 14%;
    left: 14%;
    transform: scale(1) translate(-50%, 50%);
    transform-origin: 0 100%;

    &.ZuBadge-invisible {
      transform: scale(0) translate(-50%, 50%);
    }
  }

  &.ZuBadge-overlapRect {
    bottom: 0;
    left: 0;
    transform: scale(1) translate(-50%, 50%);
    transform-origin: 0 100%;

    &.ZuBadge-invisible {
      transform: scale(0) translate(-50%, 50%);
    }
  }
}

.ZuBadge-anchorOriginBottomRight {
  &.ZuBadge-overlapCircular {
    bottom: 14%;
    right: 14%;
    transform: scale(1) translate(50%, 50%);
    transform-origin: 100% 100%;

    &.ZuBadge-invisible {
      transform: scale(0) translate(50%, 50%);
    }
  }

  &.ZuBadge-overlapRect {
    bottom: 0;
    right: 0;
    transform: scale(1) translate(50%, 50%);
    transform-origin: 100% 100%;

    &.ZuBadge-invisible {
      transform: scale(0) translate(50%, 50%);
    }
  }
}

/* State class applied to the badge `span` element if invisible={true}. */
.ZuBadge-invisible {
  transition: transform $zu-easing-easeInOut $zu-duration-leavingScreen 0ms;
}

/* Styles applied to the badge `span` element if color="primary". */
.ZuBadge-colorPrimary {
  color: $zu-palette-primary-contrastText;
  background-color: $zu-palette-primary-main;
}

/* Styles applied to the badge `span` element if color="secondary". */
.ZuBadge-colorSecondary {
  color: $zu-palette-secondary-contrastText;
  background-color: $zu-palette-secondary-main;
}

/* Styles applied to the badge `span` element if color="error". */
.ZuBadge-colorError {
  color: $zu-palette-error-contrastText;
  background-color: $zu-palette-error-main;
}

/* Styles applied to the badge `span` element if color="info". */
.ZuBadge-colorInfo {
  color: $zu-palette-info-contrastText;
  background-color: $zu-palette-info-main;
}

/* Styles applied to the badge `span` element if color="success". */
.ZuBadge-colorSuccess {
  color: $zu-palette-success-contrastText;
  background-color: $zu-palette-success-main;
}

/* Styles applied to the badge `span` element if color="warning". */
.ZuBadge-colorWarning {
  color: $zu-palette-warning-contrastText;
  background-color: $zu-palette-warning-main;
}

/* Styles applied to the badge `span` element if overlap="circular". */
.ZuBadge-overlapCircular {

}

/* Styles applied to the badge `span` element if overlap="rect". */
.ZuBadge-overlapRect {

}