@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.masked-font,
pre.masked-font {
  color: var(--token-color-foreground-faint);
}

.masked-input {
  display: flex;
  align-items: center;
}

.has-label .masked-input {
  padding-top: size_variables.$spacing-12;
}

.has-padding {
  padding: size_variables.$spacing-8 size_variables.$spacing-12;
}

// we want to style the boxes the same everywhere so they
// need to be the same font and small
.masked-input.masked .masked-value {
  font-size: 9px;
  font-family: font_variables.$family-sans;
  line-height: 2.5;
}

.masked-input.display-only .masked-value {
  order: 1;
}

// aligns the boxes on the input page
.masked-input.masked:not(.display-only) .masked-value {
  line-height: 3;
  border-radius: size_variables.$radius 0 0 size_variables.$radius;
}

//override bulma's pre styling
.masked-input .display-only {
  line-height: 1.5;
  font-size: 1rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: size_variables.$spacing-12;
  background-color: transparent;
}

.button.masked-input-toggle {
  min-width: size_variables.$spacing-36;
  border-left: 0;
  color: var(--token-color-palette-neutral-400);
  box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
}

.button.masked-input-toggle {
  border-radius: 0 size_variables.$radius size_variables.$radius 0;
}

.display-only {
  .button.masked-input-toggle {
    background: transparent;
    height: auto;
    line-height: 1rem;
    min-width: size_variables.$spacing-24;
    border: 0;
    box-shadow: none;
    color: var(--token-color-palette-neutral-300);
    padding-left: 0;
    padding-right: 0;

    &:active,
    &.is-active,
    &:focus,
    &:hover,
    &:focus:not(:active) {
      color: var(--token-color-palette-blue-200);
      border: 0;
      box-shadow: none;
    }
  }
}

.masked-input.masked .masked-value {
  color: var(--token-color-foreground-faint);
}

.masked-input .input:focus + .masked-input-toggle {
  background: rgba(hsl(0, 0%, 100%), 0.95);
}