.nixfubu-smart-button-block {
  width: 100%;
  margin-bottom: var(--nixfubu-smart-button-margin-bottom, 16px);
  border: 0;
  outline: 0;
  box-shadow: none;
  text-align: var(--nixfubu-smart-button-align, left);
  min-width: max-content;
}

.nixfubu-smart-button-block.is-align-stretch {
  text-align: left;
  min-width: 0;
}

.nixfubu-smart-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nixfubu-smart-button-width, auto);
  max-width: 100%;
  min-height: 1px;
  padding: var(--nixfubu-smart-button-py, 14px) var(--nixfubu-smart-button-px, 28px);
  border: var(--nixfubu-smart-button-border-width, 0) solid var(--nixfubu-smart-button-border-color, transparent);
  border-radius: var(--nixfubu-smart-button-radius, 999px);
  background: var(--nixfubu-smart-button-bg, #2563eb);
  color: var(--nixfubu-smart-button-color, #ffffff);
  box-shadow: var(--nixfubu-smart-button-shadow, none);
  font-family: var(--nixfubu-smart-button-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--nixfubu-smart-button-size, 16px);
  font-style: var(--nixfubu-smart-button-style, normal);
  font-weight: var(--nixfubu-smart-button-weight, 700);
  line-height: var(--nixfubu-smart-button-line-height, 1.2);
  letter-spacing: var(--nixfubu-smart-button-letter-spacing, 0);
  text-align: center;
  text-decoration: var(--nixfubu-smart-button-decoration, none);
  text-transform: var(--nixfubu-smart-button-transform, none);
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nixfubu-smart-button-block.is-align-stretch .nixfubu-smart-button__link {
  width: 100%;
}

.nixfubu-smart-button__link:hover,
.nixfubu-smart-button__link:focus {
  border-color: var(--nixfubu-smart-button-hover-border-color, var(--nixfubu-smart-button-border-color, transparent));
  background: var(--nixfubu-smart-button-hover-bg, var(--nixfubu-smart-button-bg, #1d4ed8));
  color: var(--nixfubu-smart-button-hover-color, var(--nixfubu-smart-button-color, #ffffff));
  box-shadow: var(--nixfubu-smart-button-hover-shadow, var(--nixfubu-smart-button-shadow, none));
  text-decoration: var(--nixfubu-smart-button-decoration, none);
}

.editor-styles-wrapper .nixfubu-smart-button__link {
  cursor: text;
}

.editor-styles-wrapper .wp-block-nixfubu-smart-button,
.editor-styles-wrapper .nixfubu-smart-button-block,
.editor-styles-wrapper [data-type="nixfubu/smart-button"],
.editor-styles-wrapper [data-type="nixfubu/smart-button"] > .block-editor-block-list__block-edit,
.editor-styles-wrapper [data-type="nixfubu/smart-button"] > .block-editor-block-list__block-edit > div {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.editor-styles-wrapper [data-type="nixfubu/smart-button"]::before,
.editor-styles-wrapper [data-type="nixfubu/smart-button"]::after,
.editor-styles-wrapper .wp-block-nixfubu-smart-button::before,
.editor-styles-wrapper .wp-block-nixfubu-smart-button::after,
.editor-styles-wrapper .nixfubu-smart-button-block::before,
.editor-styles-wrapper .nixfubu-smart-button-block::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.nixfubu-smart-button-control .components-base-control__label,
.nixfubu-smart-button-segment .components-base-control__label {
  margin-bottom: 7px;
}

.nixfubu-smart-button-color {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d6dce5;
  border-radius: 4px;
  background: #fff;
}

.nixfubu-smart-button-color input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 4px;
  border: 0;
  border-right: 1px solid #e2e8f0;
  background: #fff;
}

.nixfubu-smart-button-color input[type="text"] {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
}

.nixfubu-smart-button-segment__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d6dce5;
  border-radius: 4px;
  background: #fff;
}

.nixfubu-smart-button-segment__button.components-button {
  min-height: 32px;
  justify-content: center;
  border-radius: 0;
  box-shadow: none;
  color: #475569;
  font-size: 12px;
}

.nixfubu-smart-button-segment__button.components-button + .nixfubu-smart-button-segment__button.components-button {
  border-left: 1px solid #e2e8f0;
}

.nixfubu-smart-button-segment__button.components-button.is-active {
  background: #d7dbe0;
  color: #111827;
}

@media (max-width: 767px) {
  .nixfubu-smart-button__link {
    padding: var(--nixfubu-smart-button-py-mobile, var(--nixfubu-smart-button-py, 14px)) var(--nixfubu-smart-button-px-mobile, var(--nixfubu-smart-button-px, 28px));
    font-size: var(--nixfubu-smart-button-size-mobile, var(--nixfubu-smart-button-size, 16px));
    line-height: var(--nixfubu-smart-button-line-height-mobile, var(--nixfubu-smart-button-line-height, 1.2));
    letter-spacing: var(--nixfubu-smart-button-letter-spacing-mobile, var(--nixfubu-smart-button-letter-spacing, 0));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .nixfubu-smart-button__link {
    padding: var(--nixfubu-smart-button-py-tablet, var(--nixfubu-smart-button-py, 14px)) var(--nixfubu-smart-button-px-tablet, var(--nixfubu-smart-button-px, 28px));
    font-size: var(--nixfubu-smart-button-size-tablet, var(--nixfubu-smart-button-size, 16px));
    line-height: var(--nixfubu-smart-button-line-height-tablet, var(--nixfubu-smart-button-line-height, 1.2));
    letter-spacing: var(--nixfubu-smart-button-letter-spacing-tablet, var(--nixfubu-smart-button-letter-spacing, 0));
  }
}

.editor-styles-wrapper .nixfubu-smart-button-block.is-preview-tablet .nixfubu-smart-button__link {
  padding: var(--nixfubu-smart-button-py-tablet, var(--nixfubu-smart-button-py, 14px)) var(--nixfubu-smart-button-px-tablet, var(--nixfubu-smart-button-px, 28px));
  font-size: var(--nixfubu-smart-button-size-tablet, var(--nixfubu-smart-button-size, 16px));
  line-height: var(--nixfubu-smart-button-line-height-tablet, var(--nixfubu-smart-button-line-height, 1.2));
  letter-spacing: var(--nixfubu-smart-button-letter-spacing-tablet, var(--nixfubu-smart-button-letter-spacing, 0));
}

.editor-styles-wrapper .nixfubu-smart-button-block.is-preview-mobile .nixfubu-smart-button__link {
  padding: var(--nixfubu-smart-button-py-mobile, var(--nixfubu-smart-button-py, 14px)) var(--nixfubu-smart-button-px-mobile, var(--nixfubu-smart-button-px, 28px));
  font-size: var(--nixfubu-smart-button-size-mobile, var(--nixfubu-smart-button-size, 16px));
  line-height: var(--nixfubu-smart-button-line-height-mobile, var(--nixfubu-smart-button-line-height, 1.2));
  letter-spacing: var(--nixfubu-smart-button-letter-spacing-mobile, var(--nixfubu-smart-button-letter-spacing, 0));
}