@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 {
  // Margin
  &[style*="--svg--margin-top--sm"] {
    margin-top: var(--svg--margin-top--sm) !important;
  }
  &[style*="--svg--margin-top--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      margin-top: var(--svg--margin-top--md) !important;
    }
  }
  &[style*="--svg--margin-top--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      margin-top: var(--svg--margin-top--lg) !important;
    }
  }
  &[style*="--svg--margin-right--sm"] {
    margin-right: var(--svg--margin-right--sm) !important;
  }
  &[style*="--svg--margin-right--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      margin-right: var(--svg--margin-right--md) !important;
    }
  }
  &[style*="--svg--margin-right--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      margin-right: var(--svg--margin-right--lg) !important;
    }
  }
  &[style*="--svg--margin-bottom--sm"] {
    margin-bottom: var(--svg--margin-bottom--sm) !important;
  }
  &[style*="--svg--margin-bottom--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      margin-bottom: var(--svg--margin-bottom--md) !important;
    }
  }
  &[style*="--svg--margin-bottom--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      margin-bottom: var(--svg--margin-bottom--lg) !important;
    }
  }
  &[style*="--svg--margin-left--sm"] {
    margin-left: var(--svg--margin-left--sm) !important;
  }
  &[style*="--svg--margin-left--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      margin-left: var(--svg--margin-left--md) !important;
    }
  }
  &[style*="--svg--margin-left--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      margin-left: var(--svg--margin-left--lg) !important;
    }
  }

  // Justify alignment
  &[style*="--svg--justify-alignment--"] {
    display: flex;
  }
  &[style*="--svg--justify-alignment--sm"] {
    justify-content: var(--svg--justify-alignment--sm);
  }
  &[style*="--svg--justify-alignment--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      justify-content: var(--svg--justify-alignment--md);
    }
  }
  &[style*="--svg--justify-alignment--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      justify-content: var(--svg--justify-alignment--lg);
    }
  }

  // Stack context
  &[style*="--svg--zindex"]  {
    position: relative;
    z-index: var(--svg--zindex);
  }

  // Width
  [style*="--svg--width--sm"] {
    width: var(--svg--width--sm);
  }
  [style*="--svg--width--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      width: var(--svg--width--md);
    }
  }
  [style*="--svg--width--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      width: var(--svg--width--lg);
    }
  }

  // Height
  [style*="--svg--height--sm"] {
    height: var(--svg--height--sm);
  }
  [style*="--svg--height--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      height: var(--svg--height--md);
    }
  }
  [style*="--svg--height--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      height: var(--svg--height--lg);
    }
  }

  // Spacing
  // Padding
  [style*="--svg--padding-top--sm"] {
    padding-top: var(--svg--padding-top--sm);
  }
  [style*="--svg--padding-top--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      padding-top: var(--svg--padding-top--md);
    }
  }
  [style*="--svg--padding-top--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      padding-top: var(--svg--padding-top--lg);
    }
  }
  [style*="--svg--padding-right--sm"] {
    padding-right: var(--svg--padding-right--sm);
  }
  [style*="--svg--padding-right--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      padding-right: var(--svg--padding-right--md);
    }
  }
  [style*="--svg--padding-right--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      padding-right: var(--svg--padding-right--lg);
    }
  }
  [style*="--svg--padding-bottom--sm"] {
    padding-bottom: var(--svg--padding-bottom--sm);
  }
  [style*="--svg--padding-bottom--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      padding-bottom: var(--svg--padding-bottom--md);
    }
  }
  [style*="--svg--padding-bottom--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      padding-bottom: var(--svg--padding-bottom--lg);
    }
  }
  [style*="--svg--padding-left--sm"] {
    padding-left: var(--svg--padding-left--sm);
  }
  [style*="--svg--padding-left--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      padding-left: var(--svg--padding-left--md);
    }
  }
  [style*="--svg--padding-left--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      padding-left: var(--svg--padding-left--lg);
    }
  }

  // Border
  [style*="--svg--border--sm"] {
    border: var(--svg--border--sm);
  }
  [style*="--svg--border--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      border: var(--svg--border--md);
    }
  }
  [style*="--svg--border--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      border: var(--svg--border--lg);
    }
  }

  // Border radius
  [style*="--svg--border-radius--sm"] {
    border-radius: var(--svg--border-radius--sm);
  }
  [style*="--svg--border-radius--md"] {
    @media (min-width: map-get($breakpoints, md )) {
      border-radius: var(--svg--border-radius--md);
    }
  }
  [style*="--svg--border-radius--lg"] {
    @media (min-width: map-get($breakpoints, lg )) {
      border-radius: var(--svg--border-radius--lg);
    }
  }

  .use-as-button {
    // Width
    &[style*="--svg--svg-width--sm"] {
      svg {
        width: var(--svg--svg-width--sm) !important;
      }
    }
    &[style*="--svg--svg-width--md"] {
      @media (min-width: map-get($breakpoints, md )) {
        svg {
          width: var(--svg--svg-width--md) !important;
        }
      }
    }
    &[style*="--svg--svg-width--lg"] {
      @media (min-width: map-get($breakpoints, lg )) {
        svg {
          width: var(--svg--svg-width--lg) !important;
        }
      }
    }

    // Gap
    &[style*="--svg--gap--sm"] {
      gap: var(--svg--gap--sm);
    }
    &[style*="--svg--gap--md"] {
      @media (min-width: map-get($breakpoints, md )) {
        gap: var(--svg--gap--md);
      }
    }
    &[style*="--svg--gap--lg"] {
      @media (min-width: map-get($breakpoints, lg )) {
        gap: var(--svg--gap--lg);
      }
    }

    // Text color
    &[style*="--svg--text-color:"] {
      color: var(--svg--text-color);
    }
  }

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