@import "2.mixins/mixins";
@import "1.global/global";
@import "4.plugins/plugins";
@import "./2.mixins/rfs";

// This variable is repeated across Button, Buttons, and Buttons editor styles.
$blocks-block__margin: 0.5em;

.directorist-modal-trigger.directorist-modal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--directorist-modal-icon-gap, 8px);
  font: inherit;
  line-height: inherit;
  cursor: pointer;

  &:not(.has-background) {
    background-color: transparent;
    background-image: none;
  }

  &:not(.has-text-color) {
    color: inherit;
  }

  &--reverse {
    flex-direction: row-reverse;
  }

  &.directorist-modal-trigger--icon-only {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    min-width: var(--directorist-modal-icon-size, 24px);
    min-height: var(--directorist-modal-icon-size, 24px);
    padding: 0;
  }

  .directorist-modal-trigger__icon,
  .directorist-modal-trigger__custom-icon,
  .directorist-modal-trigger__editor-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--directorist-modal-icon-size, 24px);
    height: var(--directorist-modal-icon-size, 24px);
    object-fit: contain;
  }

  .directorist-modal-trigger__icon::after {
    width: 100%;
    height: 100%;
    background-color: var(--directorist-modal-icon-color, currentColor);
  }

  .directorist-modal-trigger__editor-icon--directorist {
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
}

.directorist-search-popup-block.wp-block-directorist-search-modal {
  display: block;
}

.directorist-modal-icon-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

// Prefer the link selector instead of the regular button classname
// to support the previous markup in addition to the new one.
.wp-block-button__link {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
  box-sizing: border-box;

  &.aligncenter {
    text-align: center;
  }

  &.alignright {
    /*rtl:ignore*/
    text-align: right;
  }
}

// These rules are set to zero specificity to keep the default styles for buttons.
// They are needed for backwards compatibility.
:where(.wp-block-button__link) {
  // This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
  box-shadow: none;
  text-decoration: none;

  // 100% causes an oval, but any explicit but really high value retains the pill shape.
  border-radius: 9999px;

  // The extra 2px are added to size solids the same as the outline versions.
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.wp-block-directorist-account-block-directorist-account-block[style*="text-decoration"]
  .wp-block-button__link {
  text-decoration: inherit;
}

// Increased specificity needed to override margins.
.wp-block-directorist-account-block-directorist-account-block {
  &.has-custom-width {
    max-width: none;
    .wp-block-button__link {
      width: 100%;
    }
  }

  &.has-custom-font-size {
    .wp-block-button__link {
      font-size: inherit;
    }
  }

  &.wp-block-button__width-25 {
    width: calc(
      25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75)
    );
  }

  &.wp-block-button__width-50 {
    width: calc(
      50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5)
    );
  }

  &.wp-block-button__width-75 {
    width: calc(
      75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25)
    );
  }

  &.wp-block-button__width-100 {
    width: 100%;
    flex-basis: 100%;
  }
}

// The follow block style selectors are required for old buttons markup
// and do not use the `:root :where()` format to match specificity at
// the time they were deprecated.
.wp-block-directorist-account-block-directorist-account-block.is-style-squared,
.wp-block-directorist-account-block-directorist-account-block__link.wp-block-directorist-account-block-directorist-account-block.is-style-squared {
  border-radius: 0;
}
.wp-block-directorist-account-block-directorist-account-block.no-border-radius,
.wp-block-button__link.no-border-radius {
  border-radius: 0 !important;
}

// Selectors here use the `:root :where()` format for maintaining compatibility
// with global styles and nested block style variations.
:root {
  // Outline Block Style Variation.
  :where(
    .wp-block-directorist-account-block-directorist-account-block.is-style-outline
      > .wp-block-button__link
  ),
  :where(
    .wp-block-directorist-account-block-directorist-account-block
      .wp-block-button__link.is-style-outline
  ) {
    border: 2px solid currentColor;
    padding: 0.667em 1.333em;
  }

  :where(
    .wp-block-directorist-account-block-directorist-account-block.is-style-outline
      > .wp-block-button__link:not(.has-text-color)
  ),
  :where(
    .wp-block-directorist-account-block-directorist-account-block
      .wp-block-button__link.is-style-outline:not(.has-text-color)
  ) {
    color: currentColor;
  }

  :where(
    .wp-block-directorist-account-block-directorist-account-block.is-style-outline
      > .wp-block-button__link:not(.has-background)
  ),
  :where(
    .wp-block-directorist-account-block-directorist-account-block
      .wp-block-button__link.is-style-outline:not(.has-background)
  ) {
    background-color: transparent;
    // background-image is required to overwrite a gradient background
    background-image: none;
  }
}