// standard button
button.lg,
a.lg {
  background: var(--lg-button);
  border: none;
  border-radius: 4px;
  color: white;
  padding: 0;
  min-width: 2rem;
  min-height: 2rem;
  font-family: Poppins;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  iconify-icon {
    pointer-events: none;
  }
}
button.lg:hover {
  cursor: pointer;
  background: var(--lg-button-hover);
}
button.lg:active {
  cursor: pointer;
  background: var(--lg-button-active);
}
button.lg:disabled {
  cursor: not-allowed;
  background: var(--lg-button-disabled);
  color: var(--lg-text-disabled);
}

// nav button
button.lg.nav {
  position: relative;
  background: var(--lg-contrast-light);
  border: 1px solid var(--lg-contrast);
  padding: 0.5rem;
  min-width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  overflow: hidden;

  .link-icon {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    transform: rotate(-45deg);
  }
}
button.lg.nav:hover {
  background: var(--lg-contrast-medium);
}
button.lg.nav:active {
  background: var(--lg-contrast);
}

// dark button
button.lg.dark,
a.lg.dark {
  position: relative;
  background: var(--lg-primary);
  border: 1px solid var(--lg-accent);
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 0.875rem;
  overflow: hidden;

  .link-icon {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    transform: rotate(-45deg);
  }
  &.active {
    background: var(--lg-contrast);
    border-color: var(--lg-contrast);
  }
}
button.lg.dark:hover,
a.lg.dark:hover {
  background: var(--lg-button-active);
  &.active {
    background: var(--lg-contrast-focus);
  }
}

// icon button
button.lg.icon-button {
  background: transparent;
}
button.lg.icon-button:hover {
  background: transparent;
  filter: brightness(80%);
}
button.lg.icon-button:active {
  background: transparent;
  filter: brightness(60%);
}
button.lg.icon-button:disabled {
  filter: brightness(40%);
  pointer-events: none;
}

// router button
a.lg.link-button,
a.lg.link-button:visited {
  color: var(--lg-text);
  text-decoration: none;
}
a.lg.link-button:hover,
a.lg.link-button:visited:hover {
  background: var(--lg-button-hover);
  color: var(--lg-text);
  text-decoration: none;
}
a.lg.link-button:active,
a.lg.link-button:visited:active {
  background: var(--lg-button-active);
  color: var(--lg-text);
  text-decoration: none;
}

// Debug button
button.lg.debug {
  display: none;
  position: relative;
  background: var(--lg-primary);
  border: 2px dotted var(--lg-info);
  min-width: 2rem;
  min-height: 2rem;
  font-size: 1rem;
  font-family: monospace;
  overflow: hidden;

  iconify-icon {
    padding-top: 0.125rem;
  }
}
