.button {
  --button-color-preset-primary: var(--color-elem-primary);
  --button-padding-side: 8px;
  --button-height: 40px;
  --button-color-text: var(--button-color-preset-primary);
  --button-color-hovered: var(--color-elem-accent-primary-alt);
  --button-bg: var(--color-bg-tertiary);
  --button-color-border: var(--button-bg);
  --button-font-size: var(--font-size-span-ml);
  --button-border-radius: var(--border-radius-s);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: var(--button-height);
  padding: 0 calc(var(--button-padding-side) + 4px);
  border: 2px solid var(--button-color-border);
  border-radius: var(--button-border-radius);
  color: var(--button-color-text);
  background: var(--button-bg);
  font-size: var(--button-font-size);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: var(--font-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-m);
}

.button.is-no-hover {
  cursor: default;
}

/* Colors n styles for buttons */

.button.is-style-primary {
  --button-color-text: var(--color-elem-primary-alt);
  --button-bg: var(--button-color-preset-primary);
}

.button.is-style-primary-alt {
  --button-color-text: var(--button-color-preset-primary);
  --button-bg: var(--color-elem-primary-alt);
}

.button.is-style-secondary {
  --button-color-text: var(--button-color-preset-primary);
  --button-bg: var(--color-bg-tertiary);
}
.button.is-style-accent {
  position: relative;
  --button-color-text: var(--color-elem-primary-alt);
  --button-bg: var(--gradient-accent) var(--color-bg-accent);
  overflow: hidden;
}

.button.is-style-transparent {
  --button-color-text: var(--button-color-preset-primary);
  --button-bg: transparent;
}

.button.is-style-bordered {
  --button-bg: transparent;
  --button-color-border: var(--button-color-preset-primary);
  --button-color-text: var(--button-color-preset-primary);
}

.button.is-style-bordered-alt {
  --button-color-preset-primary: var(--color-bg-primary);
  --button-bg: transparent;
  --button-color-border: var(--button-color-preset-primary);
  --button-color-text: var(--button-color-preset-primary);
}

.button.is-highlight {
  --button-color-preset-primary: var(--color-elem-secondary-highlight);
  --button-color-hovered: var(--color-elem-primary-highlight);
  --button-bg: var(--color-bg-secondary-highlight);
}

.button.is-style-primary.is-highlight {
  --button-bg: var(--color-elem-secondary-highlight);
}

/* Sizes for buttons */

.button.is-rounded {
  --button-border-radius: var(--border-radius-e);
}

.button.is-aspect-ratio-1b1 {
  min-width: var(--button-height);
  width: var(--button-height);
  --button-padding-side: 0 !important;
}

.button.is-size-l {
  --button-padding-side: 8px;
  --button-height: 40px;
  --button-font-size: var(--font-size-span-ml);
}
.button.is-wide,
.button.is-size-l.is-wide {
  --button-padding-side: 24px;
}

.button.is-size-m {
  --button-padding-side: 8px;
  --button-height: 28px;
  --button-font-size: var(--font-size-span-m);
}
.button.is-size-m.is-wide {
  --button-padding-side: 20px;
}

.button.is-size-s {
  --button-padding-side: 4px;
  --button-height: 24px;
  --button-font-size: var(--font-size-span-xs);
  font-weight: 500;
}
.button.is-size-s.is-wide {
  --button-padding-side: 12px;
}

.button.is-size-xs {
  --button-padding-side: 4px;
  --button-height: 24px;
  --button-font-size: var(--font-size-span-xxs);
  font-weight: 600;
}
.button.is-size-xs.is-wide {
  --button-padding-side: 12px;
}

.button.is-wide-full {
  width: 100%;
}

/* Icons for buttons */

.button .icon {
  --icon-size: 20px;
  transition: var(--transition-m);
}

.button.is-size-m .icon {
  --icon-size: 16px;
}

.button.is-size-s .icon {
  --icon-size: 14px;
}

.button.is-size-xs .icon {
  --icon-size: 13px;
}

.button.is-style-secondary .icon,
.button.is-style-bordered .icon {
  filter: var(--icon-filter-clear);
}

.button.is-highlight .icon,
.button.is-highlight.is-style-secondary .icon,
.button.is-highlight.is-style-transparent .icon {
  filter: var(--icon-filter-highlight);
}

.button.is-style-primary .icon,
.button.is-style-accent .icon {
  filter: var(--icon-filter-white);
}

/* Effects for buttons */

.button:not(.is-no-hover):hover,
.button:not(.is-no-hover):active {
  --button-bg: var(--color-bg-tertiary-highlight);
  --button-color-text: var(--button-color-hovered);
}

.button.is-style-primary-alt:not(.is-no-hover):hover,
.button.is-style-primary-alt:not(.is-no-hover):active {
  --button-bg: var(--color-elem-primary-alt);
  --button-color-text: var(--button-color-hovered);
}

.button.is-highlight:not(.is-no-hover):hover,
.button.is-highlight:not(.is-no-hover):active {
  --button-bg: var(--color-bg-secondary-highlight);
}

.button:not(.is-no-hover).is-style-primary:hover,
.button:not(.is-no-hover).is-style-primary:active {
  --button-color-text: var(--color-elem-primary-alt);
  --button-bg: var(--button-color-hovered);
}

.button:not(.is-no-hover).is-style-secondary:hover,
.button:not(.is-no-hover).is-style-secondary:active {
  --button-bg: var(--color-bg-tertiary-highlight);
  --button-color-text: var(--color-elem-primary);
}

.button:not(.is-no-hover).is-style-accent:hover,
.button:not(.is-no-hover).is-style-accent:active {
  --button-color-text: var(--color-elem-primary-alt);
  --button-bg: var(--gradient-accent) var(--color-bg-accent);
}

.button:not(.is-no-hover).is-style-accent::after {
  content: "";
  position: absolute;
  left: -50%;
  width: 48px;
  height: 100px;
  transform: rotate(15deg);
  background: linear-gradient(to right, #fff0, #fff9, #fff0);
  filter: blur(12px);
}
.button:not(.is-no-hover).is-style-accent:hover::after,
.button:not(.is-no-hover).is-style-accent:active::after {
  left: 125%;
  transition: var(--transition-l);
}

.button:not(.is-no-hover).is-style-transparent:hover,
.button:not(.is-no-hover).is-style-transparent:active {
  --button-bg: transparent;
  --button-color-text: var(--button-color-hovered);
  text-decoration: underline dotted;
}

.button:not(.is-no-hover).is-style-bordered:hover,
.button:not(.is-no-hover).is-style-bordered:active {
  --button-bg: var(--button-color-preset-primary);
  --button-color-text: var(--color-elem-primary-alt);
}

.button:not(.is-no-hover).is-style-bordered-alt:hover,
.button:not(.is-no-hover).is-style-bordered-alt:active {
  --button-bg: var(--button-color-preset-primary);
  --button-color-text: var(--color-elem-primary);
}

.button:not(.is-no-hover):hover .icon,
.button:not(.is-no-hover):active .icon,
.button:not(.is-no-hover).is-style-secondary:hover .icon,
.button:not(.is-no-hover).is-style-secondary:active .icon,
.button:not(.is-no-hover).is-style-primary:hover .icon,
.button:not(.is-no-hover).is-style-primary:active .icon,
.button:not(.is-no-hover).is-style-transparent:hover .icon,
.button:not(.is-no-hover).is-style-transparent:active .icon {
  filter: var(--icon-filter-alt);
}

.button:not(.is-no-hover).is-highlight:hover .icon,
.button:not(.is-no-hover).is-highlight:active .icon,
.button:not(.is-no-hover).is-highlight.is-style-secondary:hover .icon,
.button:not(.is-no-hover).is-highlight.is-style-secondary:active .icon,
.button:not(.is-no-hover).is-highlight.is-style-transparent:hover .icon,
.button:not(.is-no-hover).is-highlight.is-style-transparent:active .icon {
  filter: var(--icon-filter-highlight);
}

.button:not(.is-no-hover).is-style-bordered:hover .icon,
.button:not(.is-no-hover).is-style-bordered:active .icon {
  filter: var(--icon-filter-white);
}

.button:not(.is-no-hover).is-style-bordered-alt:hover .icon,
.button:not(.is-no-hover).is-style-bordered-alt:active .icon {
  filter: var(--icon-filter-clear);
}

.button:not(.is-no-hover).is-style-accent:hover .icon,
.button:not(.is-no-hover).is-style-accent:active .icon,
.button:not(.is-no-hover).is-style-primary:hover .icon,
.button:not(.is-no-hover).is-style-primary:active .icon {
  filter: var(--icon-filter-white);
}

.button:not(.is-no-hover):not(.is-style-transparent):hover {
  box-shadow: var(--shadow-button);
}

.button:not(.is-no-hover):hover:active {
  box-shadow: none;
}

.button:not(.is-no-hover).is-style-primary:active,
.button:not(.is-no-hover).is-style-accent:active,
.button:not(.is-no-hover).is-style-bordered:active {
  box-shadow: var(--shadow-button-inset);
}

.button.is-style-secondary-alt,
.button.is-style-secondary-alt:hover,
.button.is-style-secondary-alt:active {
  --button-bg: var(--color-bg-primary);
}

/* Exclusive style */

.button.is-style-readmore {
  --button-color-preset-primary: var(--color-elem-secondary-highlight);
  --button-color-hovered: var(--color-elem-primary-highlight);
  --button-bg: transparent;
  justify-content: flex-start;
  padding: 0;
  height: auto;
  text-decoration: 1px underline dotted;
  font-weight: 600;
}

.button.is-style-readmore .icon,
.button.is-style-readmore:hover .icon,
.button.is-style-readmore:active .icon {
  filter: var(--icon-filter-highlight);
}

.button.is-style-readmore:hover,
.button.is-style-readmore:active {
  text-decoration: 1px underline solid;
  box-shadow: none !important;
  background: transparent;
  border-color: transparent;
}