@use "../../variables";
@use "../../utils" as *;

.progressbar {
  background-color: mvar("progressbar.bg");
  transition: width 0.3s ease;

  position: relative;
  overflow: hidden;

  align-items: center;
  display: flex;
  height: 100%;

  &:first-child {
    border-bottom-left-radius: mvar("progress.rounded");
    border-top-left-radius: mvar("progress.rounded");
  }

  &:last-child {
    border-bottom-right-radius: mvar("progress.rounded");
    border-top-right-radius: mvar("progress.rounded");
  }

  &.transparent {
    --mie-progressbar-bg: transparent !important;
  }

  > .label {
    justify-content: flex-end;
    align-items: center;
    display: flex;
    flex: 1;

    box-sizing: border-box;
    padding: 0 0.8rem;
    z-index: 10;

    font-size: mvar("progressbar.fs");
    color: mvar("progressbar.fg");
    font-weight: 400;

    transition: opacity 0.3s ease;
    opacity: 0;

    &.visible {
      opacity: 1;
    }
  }
}
