/* Frontend Styles for Button Link Block */

.dropdown-content .wp-block-storeink-button-link {
  margin-bottom: 2rem;
}

.link-button {
  position: relative;
  padding: 4px 22px 6px;
  border-radius: 999px;
  background: var(--color);
  display: block;
  width: fit-content;
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
  box-shadow: 0 4px 0 var(--color-sub);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  text-decoration: none;
  border: none;
  outline: none;
  margin-inline: auto;
}

.link-button:hover,
.link-button:focus-visible {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--color-sub);
  color: #fff;
  text-decoration: none;
}

/* Alignment support */
.wp-block-storeink-button-link.alignleft {
  text-align: left;
}

.wp-block-storeink-button-link.aligncenter {
  text-align: center;
}

.wp-block-storeink-button-link.alignright {
  text-align: right;
}

@media screen and (min-width: 768px) {
  .link-button {
    padding-block: 8px 12px;
    padding-inline: clamp(1.5rem, 0.75rem + 1.5625vw, 2.625rem);
  }
}