/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-button {
  /**
    @prop --go-btn-bg-color:
      Background colour for the button.
      - default: var(--go-color-neutral-600)
  */
  --go-btn-bg-color: var(--go-color-neutral-600);
  --go-btn-bg-color-hover: var(--go-color-neutral-500);
  --go-btn-text-color: #fff;
  --go-btn-text-color-hover: #fff;
  --go-focus-outline-color: var(--go-btn-bg-color);
  --go-btn-outline-text-color: #000;
  --go-btn-outline-text-color-hover: #000;
  --go-btn-disabled-opacity: 0.5;
  --go-btn-shadow: var(--shadow-2);
  --go-btn-padding-y: 0.5em;
  --go-btn-padding-x: 1.5em;
  --go-btn-inner-gap: 0.5rem;
  --go-btn-radius: var(--radius-2, 0.25rem);
  /**
    @prop --go-btn-icon-size:
      Outer size of the icon button.
      - default: 3rem
  */
  --go-btn-icon-size: 3rem;
  /**
    @prop --go-btn-inline-icon-size:
      Size of the icon inside the button.
      - default: calc(var(--go-btn-icon-size) / 2)
  */
  --go-btn-inline-icon-size: calc(var(--go-btn-icon-size) / 2);
  --go-btn-outline-fill-color: var(--go-color-bg);
  /**
    @prop --go-btn-border-width:
      Width of button border
      - default: 2px
  */
  --go-btn-border-width: 0.125rem;
  display: inline-block;
}
go-button.block-all {
  display: block;
  width: 100%;
}
go-button.block-desktop {
  display: block;
  width: 100%;
}
@media (min-width: 1440px) {
  go-button.block-desktop {
    display: inline-block;
    width: auto;
  }
}
go-button.block-tablet {
  display: block;
  width: 100%;
}
@media (min-width: 1024px) {
  go-button.block-tablet {
    display: inline-block;
    width: auto;
  }
}
go-button.block-mobile {
  display: block;
  width: 100%;
}
@media (min-width: 600px) {
  go-button.block-mobile {
    display: inline-block;
    width: auto;
  }
}
go-button.outline .inner-button {
  background: transparent;
  border-color: var(--go-btn-bg-color);
  color: var(--go-btn-outline-text-color);
}
go-button.outline .inner-button:hover, go-button.outline .inner-button:focus-visible {
  background: var(--go-btn-bg-color);
  color: var(--go-btn-outline-text-color-hover);
}
go-button.outline[variant=text] {
  --go-btn-bg-color: var(--go-color-neutral-700);
}
go-button.outline[variant=text] .inner-button {
  border-color: transparent;
}
go-button.outline-fill .inner-button {
  background: var(--go-btn-outline-fill-color);
}
go-button[flat] .inner-button {
  box-shadow: none;
}
go-button[flat] .inner-button:hover, go-button[flat] .inner-button:focus-visible {
  box-shadow: none;
}
go-button[round] .inner-button {
  border-radius: var(--radius-round);
}
go-button[icon] .inner-button {
  width: var(--go-btn-icon-size);
  height: var(--go-btn-icon-size);
  padding: 0;
  text-align: center;
  line-height: 1;
}
go-button[stack] .inner-button {
  flex-direction: column;
}
go-button[compact] {
  --go-btn-padding-y: 0.25em;
  --go-btn-padding-x: 0.5em;
  --go-btn-inner-gap: 0.125em;
  --go-btn-icon-size: 2rem;
}
go-button[compact] .inner-button {
  font-size: var(--go-size--1);
  line-height: 1.5em;
}
go-button[disabled] .inner-button {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  cursor: not-allowed;
  box-shadow: none;
  opacity: var(--go-btn-disabled-opacity);
}
go-button[disabled] .inner-button:hover, go-button[disabled] .inner-button:focus {
  box-shadow: none;
  outline: none;
}
go-button .inner-button {
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  gap: var(--go-btn-inner-gap);
  width: 100%;
  text-align: center;
  line-height: 1.5;
  background: var(--go-btn-bg-color);
  color: var(--go-btn-text-color);
  border: var(--go-btn-border-width) solid transparent;
  border-radius: var(--go-btn-radius);
  padding: var(--go-btn-padding-y, 0.5rem) var(--go-btn-padding-x, 1rem);
  box-shadow: var(--go-btn-shadow);
  text-underline-offset: 0.25rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--go-duration-normal) var(--go-timing-function), color var(--go-duration-normal) var(--go-timing-function), outline-offset var(--go-duration-fast) var(--go-timing-function);
}
@media (prefers-reduced-motion: reduce) {
  go-button .inner-button {
    transition-duration: 0s;
  }
}
go-button .inner-button:focus-visible {
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
  outline-offset: var(--go-focus-outline-offset);
}
go-button .inner-button:active {
  --go-focus-outline-offset: 0;
  box-shadow: var(--inner-shadow-3);
}
go-button .inner-button:hover, go-button .inner-button:focus-visible {
  --go-btn-bg-color: var(--go-btn-bg-color-hover);
  --go-btn-text-color: var(--go-btn-text-color-hover);
}
go-button .inner-button svg {
  width: var(--go-btn-inline-icon-size);
  height: var(--go-btn-inline-icon-size);
  margin: 0;
}
go-button[variant=text] {
  --go-focus-outline-color: var(--go-color-primary-600);
  --go-btn-bg-color: transparent;
  --go-btn-bg-color-hover: var(--go-color-neutral-300);
  --go-btn-text-color: currentColor;
  --go-btn-text-color-hover: currentColor;
}
go-button[variant=text] .btn-text {
  text-decoration: underline;
}
go-button[variant=text]:hover .btn-text, go-button[variant=text]:focus-within .btn-text {
  text-decoration: none;
}

:where([color-scheme=light], [data-theme=light]) go-button {
  --go-btn-bg-color: var(--go-color-neutral-600);
  --go-btn-bg-color-hover: var(--go-color-neutral-500);
}
:where([color-scheme=light], [data-theme=light]) go-button[variant=primary] {
  --go-btn-bg-color: var(--go-color-primary-600);
  --go-btn-bg-color-hover: var(--go-color-primary-500);
}
:where([color-scheme=light], [data-theme=light]) go-button[variant=secondary] {
  --go-btn-bg-color: var(--go-color-secondary-600);
  --go-btn-bg-color-hover: var(--go-color-secondary-500);
}
:where([color-scheme=light], [data-theme=light]) go-button[variant=success] {
  --go-btn-bg-color: var(--go-color-success-600);
  --go-btn-bg-color-hover: var(--go-color-success-500);
}
:where([color-scheme=light], [data-theme=light]) go-button[variant=critical] {
  --go-btn-bg-color: var(--go-color-critical-600);
  --go-btn-bg-color-hover: var(--go-color-critical-500);
}
:where([color-scheme=light], [data-theme=light]) go-button.outline {
  --go-btn-outline-text-color: var(--go-btn-bg-color);
  --go-btn-outline-text-color-hover: var(--go-color-lightest);
}

:where([color-scheme=dark], [data-theme=dark]) go-button {
  --go-btn-bg-color: var(--go-color-neutral-400);
  --go-btn-bg-color-hover: var(--go-color-neutral-500);
}
:where([color-scheme=dark], [data-theme=dark]) go-button[variant=primary] {
  --go-btn-bg-color: var(--go-color-primary-600);
  --go-btn-bg-color-hover: var(--go-color-primary-400);
}
:where([color-scheme=dark], [data-theme=dark]) go-button[variant=secondary] {
  --go-btn-bg-color: var(--go-color-secondary-400);
  --go-btn-bg-color-hover: var(--go-color-secondary-500);
}
:where([color-scheme=dark], [data-theme=dark]) go-button[variant=success] {
  --go-btn-bg-color: var(--go-color-success-400);
  --go-btn-bg-color-hover: var(--go-color-success-500);
}
:where([color-scheme=dark], [data-theme=dark]) go-button[variant=critical] {
  --go-btn-bg-color: var(--go-color-critical-400);
  --go-btn-bg-color-hover: var(--go-color-critical-500);
}
:where([color-scheme=dark], [data-theme=dark]) go-button.outline {
  --go-btn-outline-text-color: var(--go-color-darkest);
  --go-btn-outline-text-color-hover: var(--go-color-darkest);
}