discourse_theme_ran/scss/buttons.scss

:root {
  --d-button-border-radius: 6.25rem;
}

.discourse-no-touch .topic-body .actions .fade-out {
  transition: none;
}

.btn-default,
.btn-primary,
.btn-danger,
.select-kit .select-kit-header {
  padding: var(--spacing-block-s) var(--spacing-inline-m);
  // font-size: var(--font-up-1-rem);
  // border-radius: var(--d-button-border-radius);

  &.no-text {
    padding-inline: 0.665rem;
  }
}

.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
  background: var(--accent-color);
  &:hover {
    background: radial-gradient(
        90% 110% at 50% 50%,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      var(--accent-color);
  }
  svg {
    color: var(--accent-text-color);
  }
}

.discourse-no-touch .btn-default.sidebar-new-topic-button,
.discourse-no-touch .interface-color-selector-content .btn-default {
  border: none;
  &:hover {
    border: none;
    box-shadow: none;
  }
}

.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
  border: none;
  margin-left: 2px;
  &:hover {
    border: none;
    box-shadow: none;
  }
}

.btn-default {
  border: 1px solid var(--primary-300);
  background: var(--secondary);

  .d-icon {
    color: var(--accent-color);
  }

  &:hover {
    .discourse-no-touch & {
      border: 1px solid var(--accent-color);
      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
      background: var(--secondary);
      color: var(--primary);
      .d-icon {
        color: var(--accent-color);
      }
    }
  }
  &:focus-visible {
    .discourse-no-touch & {
      background: var(--secondary);
      color: var(--accent-color);
      box-shadow: 0px 0px 0px 2px var(--secondary),
        0px 0px 0px 4px var(--button-box-shadow);
      .d-icon {
        color: var(--accent-color);
      }
    }
  }
}
//not shared with select-kit
.btn-default {
  &:active {
    .discourse-no-touch & {
      color: var(--secondary);
      background: oklch(from var(--accent-color) 30% c h) !important;
      .d-icon {
        color: var(--secondary);
      }
    }
  }
}
.btn-primary,
#create-topic.btn {
  background-color: var(--accent-color);
  color: var(--accent-text-color);
  .d-icon {
    color: var(--accent-text-color);
  }
  &:hover {
    .discourse-no-touch & {
      background: radial-gradient(
          90% 110% at 50% 50%,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        var(--accent-color);
      box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
    }
  }
  &:focus-visible {
    .discourse-no-touch & {
      background: radial-gradient(
          90% 110% at 50% 50%,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(255, 255, 255, 0) 100%
        ),
        var(--accent-color);
      box-shadow: 0px 0px 0px 2px var(--secondary),
        0px 0px 0px 4px var(--button-box-shadow);
    }
  }
  &:active {
    .discourse-no-touch & {
      // background: radial-gradient(
      //     65% 95% at 50% 50%,
      //     rgba(0, 0, 0, 0.4) 0%,
      //     rgba(0, 0, 0, 0) 100%
      //   ),
      //   var(--accent-color) !important;
      background: oklch(from var(--accent-color) 30% c h) !important;
    }
  }
}

.post-controls {
  svg.d-icon {
    color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
  }
}

//undoing the outline for select-kit, since Im using a custom visual cue
.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
.select-kit.single-select .select-kit-header:not(.btn):focus,
.select-kit.single-select .select-kit-header:not(.btn):active {
  outline: transparent;
  border-color: var(--accent-color);
}