.vocabulary-learning-mode-control {
  position: relative;
  margin-left: auto;
}

.vocabulary-course-summary > .vocabulary-course-summary-copy {
  flex: 1 1 auto;
  width: auto;
}

.vocabulary-course-summary > .vocabulary-learning-mode-control {
  flex: 0 0 auto;
  margin-left: auto;
}

.vocabulary-learning-mode-trigger {
  align-items: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8d4cc);
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font: inherit;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .45rem .8rem;
}

.vocabulary-learning-mode-dialog {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d8d4cc);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgb(31 34 38 / 18%);
  min-width: min(26rem, calc(100vw - 2rem));
  padding: 1rem;
  position: absolute;
  right: 0;
  top: calc(100% + .55rem);
  z-index: 20;
}

.vocabulary-learning-mode-dialog-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: .7rem;
}

.vocabulary-learning-mode-options {
  display: grid;
  gap: .5rem;
}

.vocabulary-learning-mode-option {
  align-items: flex-start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: .8rem;
  color: inherit;
  display: grid;
  font: inherit;
  gap: .75rem;
  grid-template-columns: 2rem 1fr;
  padding: .75rem;
  text-align: left;
  width: 100%;
}

.vocabulary-learning-mode-option:hover:not(:disabled),
.vocabulary-learning-mode-option:focus-visible,
.vocabulary-learning-mode-option.is-current {
  background: color-mix(in srgb, var(--accent, #326b59) 10%, #fff);
  border-color: color-mix(in srgb, var(--accent, #326b59) 40%, #fff);
}

.vocabulary-learning-mode-option:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.vocabulary-learning-mode-icon {
  align-items: center;
  background: var(--surface-muted, #f2f0eb);
  border-radius: .6rem;
  display: inline-flex;
  font-size: 1.05rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.vocabulary-learning-mode-icon.is-trigger {
  display: none;
}

.vocabulary-learning-mode-icon-svg {
  display: none;
  height: 1.15rem;
  width: 1.15rem;
}

@media (min-width: 1100px) {
  .vocabulary-learning-mode-trigger {
    min-height: 2rem;
    padding: .3rem .65rem;
    border-color: color-mix(in srgb, var(--accent, #326b59) 22%, transparent);
    background: color-mix(in srgb, var(--accent, #326b59) 6%, #fff);
    box-shadow: none;
  }

  .vocabulary-learning-mode-icon.is-trigger {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .35rem;
    background: transparent;
  }

  .vocabulary-learning-mode-icon-glyph {
    display: none;
  }

  .vocabulary-learning-mode-icon-svg {
    display: block;
  }
}

.vocabulary-learning-mode-option strong,
.vocabulary-learning-mode-option small,
.vocabulary-learning-mode-option em {
  display: block;
}

.vocabulary-learning-mode-option small {
  line-height: 1.45;
  margin-top: .15rem;
}

.vocabulary-learning-mode-option em {
  color: var(--accent, #326b59);
  font-size: .78rem;
  font-style: normal;
  margin-top: .25rem;
}

@media (max-width: 620px) {
  .vocabulary-learning-mode-dialog {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: auto;
    width: 100%;
  }

  .vocabulary-mobile-sheet .vocabulary-learning-mode-control {
    width: 100%;
    margin: 0;
  }

  .vocabulary-mobile-sheet .vocabulary-learning-mode-trigger {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    border-radius: 14px;
    padding-inline: 14px;
  }

  .vocabulary-mobile-sheet [data-mobile-vocabulary-section="mode"] .vocabulary-learning-mode-trigger,
  .vocabulary-mobile-sheet [data-mobile-vocabulary-section="mode"] .vocabulary-learning-mode-dialog-head {
    display: none;
  }

  .vocabulary-mobile-sheet .vocabulary-learning-mode-dialog {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}