@use "../../../../styles/int.scss";

.splitEvs {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: int.$spacing-10;
  margin-left: int.$spacing-10;
  transition: opacity .2s linear;

  @include int.container-at-least("lg") {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: int.$spacing-1;
    row-gap: int.$spacing-1;
    align-items: center;
    position: absolute;
    bottom: int.$spacing-16;
    right: 0;

    &.isZoomed {
      opacity: 0;
      pointer-events: none;
    }

    &.zoomable {
      right: int.$spacing-16;
    }
  }
}

.label {
  cursor: default;

  @include int.sans($role: "label", $weight: "bold", $size: "100");
}
