@import "./variables.scss";

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-boldblocks-svg-block {
  display: flex;

  &,
  * {
    box-sizing: border-box;
  }

  :not(.use-as-button) {
    svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .is-invert {
    svg {
      transform: scaleY(-1);
    }
  }

  .is-flip {
    svg {
      transform: scaleX(-1);
    }

    &.is-invert {
      svg {
        transform: scale(-1, -1);
      }
    }
  }

  // Block inner
  > .wp-block-boldblocks-svg-block__inner {
    display: block;
    line-height: 0;
  }

  .use-as-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    &.icon-right {
      svg {
        order: 1;
      }
    }

    &.is-edit .button-text {
      line-height: 1;
    }

    svg {
      height: auto !important;
    }
  }

  // Dynamic style
  &.svg-zindex  {
    position: relative;
    z-index: var(--svg--zindex);
  }

  // Color
  .svg-fill-color {
    [fill],
    svg {
      &,
      * {
        fill: var(--svg--fill-color) !important;
      }
    }
  }
  .svg-stroke-color {
    color: var(--svg--stroke-color);
    [stroke],
    svg {
      &,
      * {
        stroke: var(--svg--stroke-color) !important;
      }
    }
  }
  .svg-background-color {
    background: var(--svg--background-color);
  }

  // Button text color
  .svg-text-color {
    color: var(--svg--text-color);
  }

  .use-as-button {
    // Icon width
    &.svg-svg-width {
      svg {
        width: var(--svg--svg-width) !important;
      }
    }
    // Gap
    &.svg-gap {
      gap: var(--svg--gap) !important;
    }
  }

  // Shadow
  .svg-shadow {
    box-shadow: var(--svg--shadow);
  }
}