@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";

@mixin styles {
  .wp-block-quote {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    position: relative;
    border: fun.convert-px(1) solid var(--color-primary-lighter);
    border-left: fun.convert-px(5) solid var(--color-primary-lighter);
    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
        var(--color-shadow-light),
      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
        var(--color-shadow-light);
    font-style: italic;

    > *:last-child {
      margin: 0;
    }

    cite {
      font-size: var(--font-size-sm);
      font-style: normal;
      font-weight: 600;
    }
  }

  .wp-block-code,
  .wp-block-preformatted {
    margin: 0 auto var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg-secondary);
    border: fun.convert-px(1) solid var(--color-border-light);
    color: var(--color-fg);
  }

  .wp-block-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;

    @include mix.media("screen") {
      @include mix.dimensions("sm") {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    &.are-vertically-aligned-center {
      align-items: center;
    }
  }

  .wp-block-column {
    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }

  .wp-block-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);

    .blocks-gallery-grid {
      @extend %reset-list;

      grid-column: 1 / -1;
      grid-row: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--spacing-sm);
    }

    .blocks-gallery-item {
      figure {
        margin: 0;
      }

      a {
        display: block;
        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
          fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
            var(--color-shadow-light),
          fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
            var(--color-shadow-light);

        &:hover,
        &:focus {
          transform: scale(1.05);
          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
            fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
              var(--color-shadow-light),
            fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
              var(--color-shadow-light);
        }

        &:focus {
          outline: solid var(--color-primary-light);
        }

        &:active {
          transform: scale(0.95);
          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
            fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
              var(--color-shadow-light),
            0 0 0 0 var(--color-shadow-light);
          outline: none;
        }
      }
    }

    &.aligncenter {
      .blocks-gallery-grid {
        align-items: center;
      }
    }

    @for $i from 0 to 6 {
      &.columns-#{$i} {
        @include mix.media("screen") {
          @include mix.dimensions("xs") {
            grid-template-columns: repeat(2, minmax(0, 1fr));

            .blocks-gallery-grid {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }

          @include mix.dimensions("sm") {
            grid-template-columns: repeat(#{$i}, minmax(0, 1fr));

            .blocks-gallery-grid {
              grid-template-columns: repeat(3, minmax(0, 1fr));
            }
          }
        }
      }
    }
  }

  .wp-block-image {
    img {
      display: block;
      margin: auto;
      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
          var(--color-shadow-light),
        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
          var(--color-shadow-light);
      text-align: center;
    }
  }

  .wp-block-video {
    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
        var(--color-shadow-light),
      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
        var(--color-shadow-light);
  }
}
8' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
<a id='n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
<a id='n46' href='#n46'>46</a>
<a id='n47' href='#n47'>47</a>
<a id='n48' href='#n48'>48</a>
<a id='n49' href='#n49'>49</a>
<a id='n50' href='#n50'>50</a>
<a id='n51' href='#n51'>51</a>
<a id='n52' href='#n52'>52</a>
<a id='n53' href='#n53'>53</a>
<a id='n54' href='#n54'>54</a>
<a id='n55' href='#n55'>55</a>
<a id='n56' href='#n56'>56</a>
<a id='n57' href='#n57'>57</a>
<a id='n58' href='#n58'>58</a>
<a id='n59' href='#n59'>59</a>
<a id='n60' href='#n60'>60</a>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span>import { ComponentMeta, ComponentStory } from &#39;@storybook/react&#39;;
import PrismThemeToggle from &#39;./prism-theme-toggle&#39;;

/**
 * PrismThemeToggle - Storybook Meta
 */
export default {
  title: &#39;Molecules/Forms/Toggle&#39;,
  component: PrismThemeToggle,
  argTypes: {
    bodyClassName: {
      control: {
        type: &#39;text&#39;,
      },
      description: &#39;Set additional classnames to the fieldset body wrapper.&#39;,
      table: {
        category: &#39;Styles&#39;,
      },
      type: {
        name: &#39;string&#39;,
        required: false,
      },
    },
    groupClassName: {
      control: {
        type: &#39;text&#39;,
      },
      description: &#39;Set additional classnames to the radio group wrapper.&#39;,
      table: {
        category: &#39;Styles&#39;,
      },
      type: {
        name: &#39;string&#39;,
        required: false,
      },
    },
    legendClassName: {
      control: {
        type: &#39;text&#39;,
      },
      description: &#39;Set additional classnames to the legend.&#39;,
      table: {
        category: &#39;Styles&#39;,
      },
      type: {
        name: &#39;string&#39;,
        required: false,
      },
    },
  },
} as ComponentMeta&lt;typeof PrismThemeToggle&gt;;

const Template: ComponentStory&lt;typeof PrismThemeToggle&gt; = (args) =&gt; (
  &lt;PrismThemeToggle {...args} /&gt;
);

/**
 * Toggle Stories - Prism theme
 */
export const PrismTheme = Template.bind({});
</pre></div>
</code></pre></td></tr></table>
</div> <!-- class=content -->
<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit v1.2.3</a> (<a href='https://git-scm.com/'>git 2.39.1</a>) at 2025-11-02 01:41:19 +0000</div>
</div> <!-- id=cgit -->
</body>
</html>
