.two-factor__container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-auto-rows: auto;
  gap: 1rem;
}

.two-factor__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 1rem;
}

.two-factor__item {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--primary-color-alpha-5);
  backdrop-filter: var(--modal-container-backdrop-filter);
  width: 24rem;
  text-align: center;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: --totp-stop 1.1s;
  grid-template-columns: 4rem 1fr;
  position: relative;
}

.two-factor__progress {
  justify-self: start;
  background: var(--primary-color-alpha-15);
  grid-column: 1/3;
  grid-row: 1 / 5;
  height: calc(100% + 2rem);
  margin: -1rem;
  border-radius: var(--border-radius);
  transition:
    background 0.3s,
    width 1s ease;

  &.is--copied {
    background: var(--positive-color-alpha-25);
  }
}

.two-factor__code {
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-code);
  font-size: 2rem;
  grid-row: 2;
  grid-column: 2;
}

.two-factor__issuer {
  font-size: 1.25rem;
  font-weight: var(--font-weight-normal);
  grid-row: 1;
  grid-column: 2;
}

.two-factor__name {
  font-weight: var(--font-weight-light);
  grid-row: 3;
  grid-column: 2;
}

.two-factor__icon {
  grid-column: 1;
  height: 100%;
  width: 4rem;
  object-fit: scale-down;
  grid-row: 1/5;
  margin-left: 1rem;
}

.two-factor__edit-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  outline: none;
  color: var(--primary-color);
  cursor: pointer;
}

.two-factor__menu {
  background: var(--modal-background);
  backdrop-filter: var(--modal-backdrop-filter);
  display: flex;
  flex-flow: column;
  border-radius: var(--border-radius);
  justify-content: start;
}

.two-factor__menu-item {
  border-bottom: 0.0625rem solid var(--primary-color);
  color: var(--black);
  padding: 0.5rem;
  transition:
    bacground 0.3s,
    color 0.3s;
  text-align: start;

  &:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  &:last-child {
    border-bottom: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }

  &:hover {
    background: var(--primary-color-alpha-50);
  }
}