.ffe-button-group {
  display: flex;
  flex-direction: column;
  padding: var(--ffe-spacing-xl) 0;
  width: 100%;
}
.ffe-button-group .ffe-button,
.ffe-button-group .ffe-inline-button {
  justify-content: center;
  margin: 0 0 var(--ffe-spacing-xs);
}
.ffe-button-group--thin {
  padding: 0;
}
.ffe-button-group--inline {
  align-items: center;
}
.ffe-button-group--inline .ffe-button,
.ffe-button-group--inline .ffe-inline-button {
  display: inline;
  width: fit-content;
}
@media (min-width: 480px) {
  .ffe-button-group {
    display: inline-flex;
    flex-direction: row;
    width: auto;
    flex-wrap: wrap;
    gap: var(--ffe-spacing-xs) var(--ffe-spacing-sm);
  }
  .ffe-button-group .ffe-button,
  .ffe-button-group .ffe-inline-button {
    width: auto;
  }
}
.ffe-button {
  --border-width: 2px;
  --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
  --padding-lg: calc(12px - var(--border-width));
  --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  border: var(--border-width) solid transparent;
  border-radius: 6em;
  color: var(--ffe-color-component-button-primary-foreground-default);
  cursor: pointer;
  display: flex;
  font-family: var(--ffe-g-font-strong);
  justify-content: center;
  line-height: 1.5;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
  -webkit-user-select: none;
          user-select: none;
  -webkit-hyphens: auto;
          hyphens: auto;
  width: 100%;
  font-size: var(--ffe-fontsize-button);
}
.ffe-button::after {
  content: '';
  opacity: 0;
  display: block;
  position: absolute;
  background: transparent;
  border-radius: 1.5rem;
  inset: -5px;
  box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
  transition: opacity var(--ffe-transition-duration) var(--ffe-ease);
}
.ffe-button:focus::after {
  opacity: 1;
}
.ffe-button:focus:not(:focus-visible)::after {
  opacity: 0;
}
.ffe-button:focus {
  outline: none;
  position: relative;
  overflow: unset;
}
.ffe-button:active {
  transform: scale(0.97);
  background-color: var(--ffe-color-component-button-primary-fill-pressed);
}
.ffe-button:visited {
  color: var(--ffe-color-component-button-primary-foreground-default);
}
@media (min-width: 480px) {
  .ffe-button {
    display: inline-flex;
    width: auto;
  }
}
.ffe-button .ffe-icons {
  display: block;
}
.ffe-button--icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffe-button--icon-only .ffe-icons {
  background-color: var(--icon-only-color);
}
.ffe-button--sm {
  padding: var(--padding-sm) 12px;
  font-size: var(--ffe-fontsize-button-sm);
}
.ffe-button--sm.ffe-button--icon-only {
  padding: var(--padding-sm);
}
.ffe-button--md {
  padding: var(--padding-md) var(--ffe-spacing-sm);
}
.ffe-button--md.ffe-button--icon-only {
  padding: var(--padding-md);
}
.ffe-button--lg {
  padding: var(--padding-lg) var(--ffe-spacing-md);
}
.ffe-button--lg.ffe-button--icon-only {
  padding: var(--padding-md);
}
.ffe-button--action {
  --icon-only-color: var(--ffe-color-component-button-action-foreground-default);
  background-color: var(--ffe-color-component-button-action-fill-default);
  color: var(--ffe-color-component-button-action-foreground-default);
}
.ffe-button--action :where(.ffe-button__icon) {
  color: var(--ffe-color-component-button-action-foreground-default);
}
.ffe-button--action:active {
  transform: scale(0.97);
  background-color: var(--ffe-color-component-button-action-fill-pressed);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-button--action:hover:not(:active, .ffe-button--pressed) {
    background-color: var(--ffe-color-component-button-action-fill-hover);
  }
}
.ffe-button--primary {
  --background-color: var(--ffe-color-component-button-primary-fill-default);
  --text-color: var(--ffe-color-component-button-primary-foreground-default);
  --icon-only-color: var(--ffe-color-component-button-primary-foreground-default);
  background-color: var(--background-color);
  color: var(--text-color);
}
.ffe-button--primary :where(.ffe-button__icon) {
  color: var(--text-color);
}
.ffe-button--primary:active {
  transform: scale(0.97);
  --background-color: var(--ffe-color-component-button-primary-fill-pressed);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-button--primary:hover {
    --background-color: var(--ffe-color-component-button-primary-fill-hover);
  }
}
.ffe-button--secondary,
.ffe-button--expand {
  --background-color: var(--ffe-color-component-button-secondary-fill-default);
  --border-color: var(--ffe-color-component-button-secondary-border-default);
  --text-color: var(--ffe-color-component-button-secondary-foreground-default);
  --icon-only-color: var(--ffe-color-component-button-secondary-foreground-default);
  background-color: var(--background-color);
  border: solid 2px var(--border-color);
  color: var(--text-color);
}
.ffe-button--secondary :where(.ffe-button__label, .ffe-button__icon),
.ffe-button--expand :where(.ffe-button__label, .ffe-button__icon) {
  color: var(--text-color);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-button--secondary:hover,
  .ffe-button--expand:hover {
    --background-color: var(--ffe-color-component-button-secondary-fill-hover);
    --border-color: var(--ffe-color-component-button-secondary-border-hover);
    --text-color: var(--ffe-color-component-button-secondary-foreground-hover);
  }
}
.ffe-button--secondary:focus,
.ffe-button--expand:focus,
.ffe-button--secondary:visited,
.ffe-button--expand:visited {
  color: var(--ffe-color-component-button-secondary-foreground-hover);
  background-color: var(--ffe-color-component-button-secondary-fill-hover);
}
.ffe-button--secondary:active,
.ffe-button--expand:active {
  transform: scale(0.97);
  background-color: var(--ffe-color-component-button-secondary-fill-pressed);
  border-color: var(--ffe-color-component-button-secondary-border-pressed);
  color: var(--ffe-color-component-button-secondary-foreground-hover);
}
.ffe-button--shortcut {
  background-color: var(--ffe-color-component-button-secondary-fill-default);
  border: solid var(--border-width) var(--ffe-color-component-button-secondary-border-default);
  color: var(--ffe-color-component-button-secondary-foreground-default);
}
.ffe-button--shortcut .ffe-button__icon {
  color: var(--ffe-color-component-button-secondary-foreground-default);
  transition: transform var(--ffe-transition-duration) var(--ffe-ease);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-button--shortcut:hover {
    background-color: var(--ffe-color-component-button-secondary-fill-hover);
    color: var(--ffe-color-component-button-secondary-foreground-hover);
  }
  .ffe-button--shortcut:hover .ffe-button__icon {
    color: var(--ffe-color-component-button-secondary-foreground-hover);
  }
}
.ffe-button--shortcut:active {
  transform: scale(0.97);
  background-color: var(--ffe-color-component-button-secondary-fill-pressed);
  color: var(--ffe-color-component-button-secondary-foreground-hover);
}
.ffe-button--shortcut:active .ffe-button__icon {
  color: var(--ffe-color-component-button-secondary-foreground-hover);
}
.ffe-button--shortcut:focus,
.ffe-button--shortcut:visited {
  color: var(--ffe-color-component-button-secondary-foreground-default);
  background-color: var(--ffe-color-component-button-secondary-fill-hover);
}
.ffe-button--shortcut:hover .ffe-button__icon,
.ffe-button--shortcut:focus .ffe-button__icon {
  transform: translateX(4px);
}
.ffe-button--expanded.ffe-button--sm {
  padding: var(--padding-sm);
}
.ffe-button--expanded.ffe-button--md {
  padding: var(--padding-md);
}
.ffe-button--expanded.ffe-button--lg {
  padding: var(--padding-lg);
}
.ffe-button--task {
  --text-color: var(--ffe-color-foreground-emphasis);
  background: transparent;
  border-radius: 1.75rem;
  border: none;
  box-shadow: none;
  color: var(--text-color);
  display: inline-block;
  padding: 0;
  margin: var(--ffe-spacing-2xs);
  text-align: left;
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
  width: auto;
}
.ffe-button--task :where(.ffe-button__icon) {
  --icon-border-color: var(--ffe-color-foreground-emphasis);
  --icon-background-color: transparent;
  --icon-color: var(--ffe-color-foreground-emphasis);
  border: 2px solid var(--icon-border-color);
  background-color: var(--icon-background-color);
  border-radius: 50%;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
}
.ffe-button--task :where(.ffe-button__icon) :where(.ffe-icons) {
  color: var(--icon-color);
}
.ffe-button--task:focus::after {
  box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
}
.ffe-button--task:active {
  transform: scale(0.97);
  background-color: transparent;
}
.ffe-button--task:active .ffe-button__icon {
  background-color: var(--ffe-color-component-button-secondary-fill-pressed);
  --icon-border-color: var(--ffe-color-foreground-emphasis);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-button--task:hover .ffe-button__icon {
    --icon-background-color: var(--ffe-color-component-button-secondary-fill-hover);
    --icon-border-color: var(--ffe-color-foreground-emphasis);
  }
}
.ffe-button--loading {
  pointer-events: none;
}
.ffe-button--loading .ffe-button__label {
  transform: translateY(-32px);
  opacity: 0;
}
.ffe-button--loading .ffe-button__spinner {
  opacity: 1;
  transform: none;
  visibility: visible;
}
.ffe-button__label {
  align-items: center;
  display: flex;
  transition: transform var(--ffe-transition-duration) var(--ffe-ease);
  gap: var(--ffe-spacing-xs);
}
.ffe-button__spinner {
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: translateY(24px);
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
  visibility: hidden;
  display: grid;
  place-items: center;
}
.ffe-button__spinner::after {
  animation: 1s linear infinite button-loading-spin;
  border: 3px solid currentcolor;
  border-radius: 50%;
  border-top-color: transparent;
  content: '';
  display: block;
  height: 1.375rem;
  aspect-ratio: 1;
}
@keyframes button-loading-spin {
  from {
    transform: none;
  }
  to {
    transform: rotate(360deg);
  }
}
.ffe-inline-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 1.375rem;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ffe-g-font);
  margin: 0 -4px;
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
  overflow: hidden;
  padding: 0 var(--ffe-spacing-2xs);
  text-decoration: none;
  font-size: var(--ffe-fontsize-body-text);
  align-items: center;
  -webkit-user-select: none;
          user-select: none;
  /* Forhindrer tekstmarkering */
}
.ffe-inline-button:active {
  transform: scale(0.97);
}
.ffe-inline-button:focus {
  box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
  outline: none;
}
.ffe-inline-button:focus:not(:focus-visible) {
  box-shadow: none;
}
.ffe-inline-button__icon {
  margin-bottom: -2px;
  will-change: transform, opacity;
}
.ffe-inline-button--expanded .ffe-inline-button__icon {
  transform: rotateZ(180deg);
}
.ffe-inline-button__icon--left {
  margin-right: var(--ffe-spacing-2xs);
}
.ffe-inline-button__icon--right {
  margin-left: var(--ffe-spacing-2xs);
}
.ffe-inline-button--back {
  background-color: var(--background-color);
  color: var(--ffe-color-component-button-tertiary-foreground-default);
  padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs) var(--ffe-spacing-sm);
}
.ffe-inline-button--back .ffe-inline-button__label::after {
  border-bottom: solid 1px currentcolor;
  content: ' ';
  display: block;
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .ffe-inline-button--back:hover {
    background-color: var(--ffe-color-component-button-tertiary-fill-hover);
    color: var(--ffe-color-component-button-tertiary-foreground-hover);
  }
}
.ffe-inline-button--back:active {
  background-color: var(--ffe-color-component-button-tertiary-fill-pressed);
}
.ffe-inline-button--back .ffe-button__icon {
  color: var(--text-color);
}
.ffe-inline-button--expand {
  --text-color: var(--ffe-color-component-button-secondary-foreground-default);
  --background-color: var(--ffe-color-component-button-secondary-fill-default);
  color: var(--text-color);
  background-color: var(--background-color);
  padding: 0 12px;
  margin: 0;
  align-items: center;
}
.ffe-inline-button--expand .ffe-inline-button__icon {
  color: var(--text-color);
  transition: transform var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-inline-button--expand:hover {
    --text-color: var(--ffe-color-component-button-secondary-foreground-hover);
    --background-color: var(--ffe-color-component-button-secondary-fill-hover);
  }
}
.ffe-inline-button--expand:active {
  --text-color: var(--ffe-color-component-button-secondary-foreground-hover);
  --background-color: var(--ffe-color-component-button-secondary-fill-pressed);
}
.ffe-inline-button--tertiary {
  --icon-size-md: 1.5rem;
  --border-width: 2px;
  --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
  --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
  --padding-lg: calc(12px - var(--border-width));
  align-content: center;
  color: var(--ffe-color-component-button-tertiary-foreground-default);
  flex-wrap: wrap;
  padding: calc(var(--ffe-spacing-xs) - var(--border-width)) var(--ffe-spacing-sm);
  border: 2px solid transparent;
  line-height: calc(var(--icon-size-md) - var(--border-width));
}
.ffe-inline-button--tertiary.ffe-inline-button--sm {
  padding: var(--padding-sm) 12px;
  font-size: var(--ffe-fontsize-button-sm);
}
.ffe-inline-button--tertiary.ffe-inline-button--sm.ffe-inline-button--icon-only {
  padding: var(--padding-sm);
}
.ffe-inline-button--tertiary.ffe-inline-button--md {
  padding: var(--padding-md) var(--ffe-spacing-sm);
}
.ffe-inline-button--tertiary.ffe-inline-button--md.ffe-inline-button--icon-only {
  padding: var(--padding-md);
}
.ffe-inline-button--tertiary.ffe-inline-button--lg {
  padding: var(--padding-lg) var(--ffe-spacing-md);
}
.ffe-inline-button--tertiary.ffe-inline-button--lg.ffe-inline-button--icon-only {
  padding: var(--padding-md);
}
.ffe-inline-button--tertiary .ffe-inline-button__icon {
  color: var(--ffe-color-component-button-tertiary-foreground-default);
}
.ffe-inline-button--tertiary .ffe-inline-button__label::after {
  border-bottom: solid var(--border-width) currentcolor;
  content: ' ';
  display: block;
  width: 100%;
}
.ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffe-inline-button--tertiary.ffe-inline-button--icon-only .ffe-inline-button__label::after {
  display: none;
}
.ffe-inline-button--tertiary:focus {
  box-shadow: none;
  border-color: var(--ffe-color-border-interactive-focus);
  color: var(--ffe-color-component-button-tertiary-foreground-default);
}
.ffe-inline-button--tertiary:focus:not(:focus-visible) {
  border-color: transparent;
}
.ffe-inline-button--tertiary:active,
.ffe-inline-button--tertiary.ffe-button--pressed {
  transform: scale(0.97);
  background-color: var(--ffe-color-default-feedback-success-strongest);
}
@media (hover: hover) and (pointer: fine) {
  .ffe-inline-button--tertiary:hover {
    color: var(--ffe-color-component-button-tertiary-foreground-hover);
    background-color: var(--ffe-color-component-button-tertiary-fill-hover);
  }
  .ffe-inline-button--tertiary:hover .ffe-inline-button__icon {
    color: var(--ffe-color-component-button-tertiary-foreground-hover);
  }
}
.ffe-inline-button--tertiary:active {
  background-color: var(--ffe-color-component-button-secondary-fill-pressed);
}