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

.masked-input.masked.display-only,
.masked-input:not(.masked) {
  align-items: start;
}

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

.has-padding {
  padding: $size-10 $size-8;
}

// 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: $family-primary;
  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: $radius 0 0 $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: $spacing-s;
  background-color: transparent;
}

.button.masked-input-toggle,
.button.copy-button {
  min-width: $spacing-xl;
  border-left: 0;
  color: $grey;
  box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
}

.button.copy-button {
  border-radius: 0;
}

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

.display-only {
  .button.masked-input-toggle,
  .button.copy-button {
    background: transparent;
    height: auto;
    line-height: 1rem;
    min-width: $spacing-l;
    z-index: 100;
    border: 0;
    box-shadow: none;
    color: $grey-light;
    padding-left: 0;
    padding-right: 0;

    &:active,
    &.is-active,
    &:focus,
    &.is-focused,
    &:hover,
    &:focus:not(:active) {
      color: $blue;
      border: 0;
      box-shadow: none;
    }
  }
}

.masked-input.masked .masked-value {
  color: $grey-light;
}

.masked-input:not(.masked) .masked-input-toggle {
  color: $blue;
}

.masked-input .input:focus + .masked-input-toggle {
  background: rgba($white, 0.95);
}