.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button--gap);
  padding: var(--button--padding-y) var(--button--padding-x);
  border-width: var(--button--border-width);
  border-style: var(--button--border-style);
  border-color: var(--button--border);
  border-radius: var(--button--border-radius--md);
  background-color: var(--button--background);
  color: var(--button--color);
  font-family: var(--button--font-family);
  font-size: var(--button--font-size--mobile);
  font-weight: var(--button--font-weight);
  font-style: var(--button--font-style);
  line-height: var(--button--line-height);
  letter-spacing: var(--button--letter-spacing);
  text-transform: var(--button--text-transform);
  text-align: center;
  text-decoration: none;
  transition: var(--transition--button);
  cursor: pointer;
  box-shadow: var(--button--shadow);
}

.button__sm {
  padding: var(--button--padding-y--sm) var(--button--padding-x--sm);
  font-size: var(--button--font-size--sm--mobile);
  border-radius: var(--button--border-radius--sm);
  border-width: var(--button--border-width--sm);
  border-style: var(--button--border-style--sm);
}

.button__md {
  padding: var(--button--padding-y--md) var(--button--padding-x--md);
  font-size: var(--button--font-size--md--mobile);
  border-radius: var(--button--border-radius--md);
  border-width: var(--button--border-width--md);
  border-style: var(--button--border-style--md);
}

.button__lg {
  padding: var(--button--padding-y--lg) var(--button--padding-x--lg);
  font-size: var(--button--font-size--lg--mobile);
  border-radius: var(--button--border-radius--lg);
  border-width: var(--button--border-width--lg);
  border-style: var(--button--border-style--lg);
}

@media (min-width: 768px) {
  .button {
    font-size: var(--button--font-size);
  }
  .button__sm {
    font-size: var(--button--font-size--sm);
  }
  .button__md {
    font-size: var(--button--font-size--md);
  }
  .button__lg {
    font-size: var(--button--font-size--lg);
  }
}

.button:hover,
.button:focus,
.button.button__active {
  background-color: var(--button--background-hover);
  color: var(--button--color-hover);
  border-color: var(--button--border-hover);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button__block {
  width: 100%;
}

.button__link {
  color: var(--button--border);
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.button__link:hover,
.button__link:focus,
.button__link.button__active {
  color: var(--button--border-hover);
  background-color: transparent;
}

.button__toggle {
  width: var(--button--toggle-size);
  height: var(--button--toggle-size);
  padding: var(--button--toggle-padding);
  background-color: transparent;
  border-color: transparent;
}

.button__toggle:hover,
.button__toggle:focus,
.button__toggle.button__active {
  background-color: transparent;
  border-color: transparent;
}

.button__toggle svg {
  color: var(--icon);
  transition: var(--transition--all);
}

.is-open .button__toggle svg {
  transform: scaleY(-1);
}