.recovery-codes {
  padding: 1rem 0;
  background: linear-gradient(135deg, var(--color-bg--surface) 0%, var(--color-bg--surface-glint) 100%);
  border-radius: 5px;

  @media (min-width: 40em) {
    padding: 1.6rem;
  }
}

.recovery-codes__code {
  font-family: var(--font-family--mono);
  padding: 0.5%;
  width: 49%;
}

.recovery-codes__code--used { color: var(--color-txt--subtle); }

.recovery-codes__actions {
  position: relative;
  margin-top: 2.6rem;
  padding: 0 1rem;

  &::before {
    content: " ";
    display: block;
    position: absolute;
    top: -1.6rem;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-border);
  }

  .hide-recovery-codes-actions & {
    display: none;
    visibility: hidden;
  }
}