@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/typography' as typography;
@use '@mezzanine-ui/system/z-index' as z-index;
@use './cropper' as *;

.#{$prefix} {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  @include typography.semantic-variable(body);

  color: palette.semantic-variable(text, neutral-strong);
  transition:
    transition.standard(color, fast),
    transition.standard(background-color, fast);

  &__element {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: spacing.semantic-variable(gap, comfort);
    box-sizing: border-box;
  }

  &__content {
    width: 100%;
  }

  &__controls {
    position: relative;
    width: 100%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__tag {
    position: absolute;
    box-sizing: border-box;
    padding-inline: spacing.semantic-variable(padding, horizontal, tiny);
    padding-block: spacing.semantic-variable(padding, vertical, micro);
    border-radius: radius.variable(base);
    background: palette.semantic-variable(overlay, strong);
    white-space: nowrap;
    transform: translate(-100%, -100%);
    pointer-events: none;
    z-index: z-index.get(popover);
  }
}