frontend/src/components/dashboard/aliases/LabelEditor.module.scss

@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
@use "../../../styles/color";

.label-form {
  position: relative;
}

.label-input {
  font-family: $font-stack-firefox;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: calc(100% - $spacing-xs);
  border-color: transparent;
  border-radius: $border-radius-sm;
  padding: $spacing-xs $spacing-sm;
  // The pencil icon is 16px wide
  padding-inline-end: calc($spacing-sm + 16px);

  @media screen and (pointer: coarse) {
    // On touch screens, the pencil is always visible and left-aligned, to be
    // flush with the placeholder, because the user can't discover that it's
    // editable through hovering:
    background-image: url("/icons/edit.svg");
    background-position: $spacing-xs;
    padding-inline-end: $spacing-sm;
    // The pencil icon is 16px wide
    padding-inline-start: calc($spacing-sm + 16px);
  }

  &:hover,
  &:focus {
    background-image: url("/icons/edit.svg");
    background-color: $color-light-gray-20;
  }
}

.confirmation-message {
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0;
  background-color: color.$green-60;
  color: color.$white;
  border-radius: $border-radius-sm;
  transition: opacity 200ms;
  padding: $spacing-xs;
  // The .copy-button-wrapper is positioned as `relative` as well,
  // leading it to overlap this confirmation message.
  // Thus, this z-index makes this message overlap that.
  z-index: 2;
  pointer-events: none; // Stop the label from blocking the alias copy button in mobile width's

  &.is-shown {
    opacity: 1;
  }

  &::after {
    // This is the little arrow that attaches the message to the form
    $arrowEdgeLength: 4px;
    background-color: color.$green-60;
    height: 2 * $arrowEdgeLength;
    width: 2 * $arrowEdgeLength;
    transform: rotate(45deg);
    content: "";
    position: absolute;
    top: -1 * $arrowEdgeLength;
    left: 12px;
  }
}