[data-theme="dark"] {
  --__ac-copybutton-action-text: var(--a-blue-300);
  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
  --__ac-copybutton-text: rgb(251 252 254 /0.96);
}

[data-theme="light"] {
  --__ac-copybutton-action-text: initial;
  --__ac-copybutton-bg-hover: initial;
  --__ac-copybutton-icon-success: initial;
  --__ac-copybutton-neutral-text: initial;
  --__ac-copybutton-text: initial;
}

.navds-copybutton {
  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);

  cursor: pointer;
  margin: 0;
  text-decoration: none;
  border: none;
  background: none;
  border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
  padding: var(--__ac-copybutton-padding);
  display: grid;
  place-content: center;
}

@media (forced-colors: active) {
  .navds-copybutton {
    background-color: ButtonFace;
    border: solid 1px ButtonText;
    color: ButtonText;
  }

  .navds-copybutton.navds-copybutton:focus-visible {
    box-shadow: none;
    outline: 2px solid highlight;
    outline-offset: 2px;
  }
}

.navds-copybutton--icon-right {
  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
}

.navds-copybutton--small {
  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);

  min-height: 2rem;
  min-width: 2rem;
}

.navds-copybutton--small.navds-copybutton--icon-right {
  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
}

.navds-copybutton--xsmall {
  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);

  min-height: 1.5rem;
  min-width: 1.5rem;
}

.navds-copybutton--xsmall.navds-copybutton--icon-right {
  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
}

.navds-copybutton--icon-only {
  --__ac-copybutton-padding: var(--a-spacing-3);
}

.navds-copybutton--small.navds-copybutton--icon-only {
  --__ac-copybutton-padding: var(--a-spacing-1);
}

.navds-copybutton--xsmall.navds-copybutton--icon-only {
  --__ac-copybutton-padding: var(--a-spacing-05);
}

.navds-copybutton__icon {
  font-size: 1.5rem;
  display: flex;
}

:where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
  font-size: 1.25rem;
}

.navds-copybutton__icon:first-of-type {
  margin-left: -0.25rem;
}

.navds-copybutton__icon:last-of-type {
  margin-right: -0.25rem;
}

.navds-copybutton__icon:only-child {
  margin: 0;
}

.navds-copybutton--active .navds-copybutton__icon {
  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes akselCopyButtonIconAnimation {
  8% {
    transform: translateY(0);
  }

  17% {
    transform: translateY(-10%);
  }

  25% {
    transform: translateY(2%);
  }

  30% {
    transform: translateY(0);
  }
}

:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
  margin: -0.125rem;
}

.navds-copybutton:focus-visible {
  outline: none;
  box-shadow: var(--a-shadow-focus);
}

@supports not selector(:focus-visible) {
  .navds-copybutton:focus {
    outline: none;
    box-shadow: var(--a-shadow-focus);
  }
}

/* Variant/action */
.navds-copybutton--action {
  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
}

.navds-copybutton--action:hover {
  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
}

.navds-copybutton--action:where(:disabled),
.navds-copybutton--action:hover:where(:disabled) {
  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
  box-shadow: none;
}

.navds-copybutton--active.navds-copybutton--action {
  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
}

/* Variant/neutral */
.navds-copybutton--neutral {
  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
}

.navds-copybutton--neutral:hover {
  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
}

.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
  box-shadow: none;
}

.navds-copybutton--active.navds-copybutton--neutral {
  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
}

.navds-copybutton__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-spacing-2);
}

.navds-copybutton--small > .navds-copybutton__content {
  gap: var(--a-spacing-1-alt);
}

.navds-copybutton--xsmall > .navds-copybutton__content {
  gap: var(--a-spacing-1);
}

.navds-copybutton--active > .navds-copybutton__content {
  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
}

@keyframes akselCopyButtonAnimation {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

/* Disabled */
.navds-copybutton:where(:disabled) {
  cursor: not-allowed;
  opacity: 0.3;
}

@media (forced-colors: active) {
  .navds-copybutton:where(:disabled) {
    opacity: 1;
    border-color: GrayText;
  }
}
