.btn {
  font-size: var(--font-m);
  font-weight: var(--y-text-bold);
  padding: var(--y-space-10) var(--y-space-64);
  border-radius: var(--y-radius-m);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  width: fit-content;
  appearance: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--y-space-8);
}
.main-button {
  background: var(--y-color-btn);
  color: var(--y-color-text);
  border: 1px solid var(--y-color-btn);
}
.main-button:hover {
  background-color: grey;
  border: 1px solid grey;
}
.btn.fw {
  width: 100%;
  padding-inline: 0;
}
.succend-button {
  background: var(--y-color-bg);
  color: var(--y-color-txt);
  border: 1px solid var(--y-color-primary);
}

.succend-button:hover {
  filter: brightness(0.8);
}
.btn.rounded {
  border-radius: var(--y-space-64);
}

.btn.center {
  margin: 0 auto;
}
.btn.outline-button {
  background-color: #ffffffcc;
  backdrop-filter: blur(10px);
  color: var(--y-color-primary);
  border: 1px solid var(--y-color-primary);
}
.btn.outline-button:hover {
  background-color: var(--y-color-primary);
  color: var(--y-color-text);
}

.btn.fit-width {
  width: fit-content;
  padding: var(--y-space-8) var(--y-space-16);
}
.btn.invert img {
  filter: invert(1);
}
.btn.invert:hover {
  filter: invert(0);
}
.btn.fh {
  height: 100%;
  padding-block: 0;
}
.btn.circle {
  border-radius: 50%;
  padding: var(--y-space-8);
  width: fit-content;
  aspect-ratio: 1;
}
.btn.disabled {
  background-color: var(--y-color-grey);
  color: var(--y-color-text);
  cursor: not-allowed;
}
.btn.white-button {
  box-shadow: var(--y-color-shadow);
}
.btn.white-button:hover {
  background-color: var(--y-color-grey);
  color: var(--y-color-bg);
  box-shadow: none;
}

.btn.small {
  font-size: var(--y-space-14);
}
@media (max-width: 768px) {
  .btn {
    font-size: var(--y-space-16) !important;
    border-radius: var(--y-radius-s);
    padding: var(--y-space-14);
  }
}