/*
  Storeblocks Button component
  Loosely grabbed from
  https://github.com/storeblocks/storeblocks-ng/blob/main/packages/button/src/lib/button.component.scss
  2023-04-04
*/

/*
Usage:

button tag classes supported:
* stb-btn-contained - show as main button
* stb-btn-outlined - show as secondary button
* stb-btn-text - show as clickable text
* show-loader - show loading indicator instead of button text

Button supports disabling with button[disabled].

Icon before and after are optional. It requires a System Icon defined here:
https://www.storebrand.no/site/stb.nsf/sbimages.html

HTML:

<button class="stb-button stb-btn-contained" onclick="onPublish(event)">
  <span class="icon-before"><i class="icon-xsmall">alert</i></span>
  <div>
    Oppdater
  </div>
  <span>
    <div class="stb-loading-indicator-dots small">
      <div class="loading-indicator" aria-label="loading">
        <div class="bounce bounce1"></div>
        <div class="bounce bounce2"></div>
        <div class="bounce bounce3"></div>
      </div>
    </div>
  </span>
  <span class="icon-after"><i class="icon-xsmall">alert</i></span>
</button>
*/

.stb-button .stb-loading-indicator-dots {
  display: none;
}

.stb-button.show-loader .stb-loading-indicator-dots {
  display: inline;
}

/* a trick to make the touch-area a bit bigger */
.stb-button {
  position: relative;
}
.stb-button:after {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  right: 0;
}
.stb-button.stb-btn-outlined:after {
  top: -5px;
  bottom: -5px;
}

/* add margin if multiple buttons are stacked side-by-side */
.stb-button + .stb-button {
  margin-left: 8px;
}
.stb-button:first-of-type {
  margin-left: 0;
}

.stb-button {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
  border: none;
  white-space: nowrap;
  color: var(--color-background);
  cursor: pointer;
  box-sizing: border-box;
  transition-property: border, background-color, color;
  transition-duration: 0.2s;
  border-radius: 2px;
  height: 40px;
  min-width: 104px;
  padding: 0px 24px;
  margin: 0;
}

/* make text transparent so we don't change the width */
.stb-button.show-loader > div {
  color: transparent;
}
/* abs pos for spinner when showing it (stops button from resizing) */
.stb-button > div + span {
  position: absolute;
}

.stb-button:hover {
  background-color: var(--color-graph-00);
}

.stb-button:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 8px;
}
.stb-button:focus:not(:focus-visible) {
  outline: 0;
}
.stb-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 8px;
  border-radius: 2px;
}

.stb-button:disabled {
  background-color: var(--color-background);
  color: var(--color-disabled);
  cursor: not-allowed;
}

.stb-button.show-loader > span .stb-loading-indicator-dots {
  display: block;
}

.stb-button .icon-before {
  margin-right: 8px;
  padding-top: 4px;
}

.stb-button .icon-after {
  margin-left: 8px;
  padding-top: 4px;
}

.stb-button.stb-btn-contained {
  background-color: var(--color-primary);
}

.stb-button.stb-btn-contained:hover,
.stb-button.stb-btn-contained:focus {
  background-color: var(--color-primary-variant);
  border-image: initial;
}

.stb-button.stb-btn-contained:disabled {
  background-color: var(--color-disabled-variant);
}

.stb-button.stb-btn-contained:active {
  background-color: var(--color-primary-pressed);
}

.stb-button.stb-btn-contained:disabled:active {
  background-color: var(--color-disabled-variant);
}

.stb-button.stb-btn-contained .stb-loading-indicator-dots .bounce {
  background-color: var(--color-background) !important;
}

.stb-button.stb-btn-outlined {
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
      background-color: transparent;
}

.stb-button.stb-btn-outlined:hover,
.stb-button.stb-btn-outlined:focus {
  border: 1px solid var(--color-primary-variant);
  color: var(--color-primary-variant);
  background-color: var(--color-overlay-hover-darken);
}

.stb-button.stb-btn-outlined:disabled {
  border: 1px solid var(--color-disabled-variant);
  color: var(--color-disabled);
}

.stb-button.stb-btn-outlined:active {
  background-color: var(--color-background);
  color: var(--color-primary-pressed);
  border: 1px solid var(--color-primary-pressed);
}

.stb-button.stb-btn-outlined:disabled:active {
  border: 1px solid var(--color-disabled-variant);
  color: var(--color-disabled);
  background-color: transparent;
}

.stb-button.stb-btn-outlined:disabled:hover,
.stb-button.stb-btn-outlined:disabled:focus {
  background-color: transparent;
}

.stb-button.stb-btn-outlined .stb-loading-indicator-dots .bounce {
  background-color: var(--color-primary) !important;
}

.stb-button.stb-btn-text {
    color: var(--color-primary);
    background: transparent;
}

.stb-button.stb-btn-text:hover,
.stb-button.stb-btn-text:focus {
  background-color: var(--color-graph-00);
  border-image: initial;
}

.stb-button.stb-btn-text:disabled {
  color: var(--color-disabled);
  border: none;
}

.stb-button.stb-btn-text:active {
  color: var(--color-primary-pressed);
}

.stb-button.stb-btn-text:disabled:active {
  background-color: transparent;
  color: var(--color-disabled);
}

.stb-button.stb-btn-text:disabled:hover,
.stb-button.stb-btn-text:disabled:focus {
  background-color: transparent;
}

.stb-button.stb-btn-text .stb-loading-indicator-dots .bounce {
  background-color: var(--color-primary) !important;
}

.stb-button.stb-btn-text-dark-mode {
    color: var(--color-background);
    background: transparent;
}

.stb-button.stb-btn-text-dark-mode:hover,
.stb-button.stb-btn-text-dark-mode:focus {
  background-color: var(--color-overlay-hover-lighten);
  border-image: initial;
}

.stb-button.stb-btn-text-dark-mode:disabled {
  color: var(--color-disabled-variant);
  border: none;
}

.stb-button.stb-btn-text-dark-mode:active {
  color: var(--color-primary-pressed);
}

.stb-button.stb-btn-text-dark-mode:disabled:active {
  background-color: transparent;
  color: var(--color-overlay-hover-lighten);
}

.stb-button.stb-btn-text-dark-mode:disabled:hover,
.stb-button.stb-btn-text-dark-mode:disabled:focus {
  background-color: transparent;
}

.stb-button.stb-btn-text-dark-mode .stb-loading-indicator-dots .bounce {
  background-color: var(--color-primary) !important;
}