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

.mie.label {
  padding: mvar("label.pv") mvar("label.ph");
  border-radius: mvar("label.rounded");
  background-color: mvar("label.bg");
  font-size: mvar("label.fs");
  color: mvar("label.fg");

  transition: all 0.3s ease;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-weight: 700;

  &.circular {
    vertical-align: middle;
    align-content: center;
    border-radius: 500rem;
  }

  &.transparent {
    --mie-label-fg: #{mvar("label.bg", true)};
    background-color: transparent !important;
  }

  &.bordered {
    border: mvar("label.border.w") solid mvar("label.border.bg");
  }

  &.floating {
    white-space: nowrap;
    position: absolute;
    z-index: 100;

    transform: translateX(50%);
    top: -0.5rem;
    right: 0;

    &.ftl {
      transform: translateX(-50%);
      right: auto;
      top: -0.5rem;
      left: 0;
    }

    &.ftr {
      transform: translateX(50%);
      top: -0.5rem;
      right: 0;
    }

    &.fbl {
      transform: translateX(-50%);
      bottom: -0.5rem;
      right: auto;
      left: 0;
    }

    &.fbr {
      transform: translateX(50%);
      bottom: -0.5rem;
      right: 0;
    }
  }
}
