/*
==========================================================
 SENTRASKY
 Buttons
 Version: 1.0.0
==========================================================
*/

.primary-button,
.secondary-button,
.text-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  min-height: 52px;

  padding: 0 24px;

  border-radius: 999px;

  font-weight: 700;
  line-height: 1;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

/*
==========================================================
 PRIMARY
==========================================================
*/

.primary-button {
  border: 1px solid transparent;

  background:
    linear-gradient(135deg, var(--accent), var(--accent-2));

  color: #031018;
}

.primary-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 45px rgba(46, 230, 214, 0.22);
}

/*
==========================================================
 SECONDARY
==========================================================
*/

.secondary-button {
  border: 1px solid var(--panel-border);

  background: rgba(255, 255, 255, 0.025);

  color: var(--text);
}

.secondary-button:hover {
  transform: translateY(-2px);

  border-color: rgba(46, 230, 214, 0.55);

  background: rgba(46, 230, 214, 0.075);
}

/*
==========================================================
 TEXT BUTTON
==========================================================
*/

.text-button {
  min-height: auto;

  padding: 0;

  border-radius: 0;

  color: var(--accent);

  background: transparent;
}

.text-button:hover {
  transform: translateX(3px);
}

/*
==========================================================
 BUTTON GROUP
==========================================================
*/

.button-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/*
==========================================================
 MOBILE
==========================================================
*/

@media (max-width: 620px) {

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .button-group {
    flex-direction: column;
  }

}