/*
Theme Name: Unusual Theme
Author: KBD
Version: 0.1.0
*/
:root body :where(.wp-block-button .wp-block-button__link) {
  height: 68px;
  display: inline-flex;
  align-items: center;
  padding: 8px 32px;
  gap: 16px;
}

:root body :where(.wp-block-button.is-style-fill .wp-block-button__link) ,
:root body :where(.wp-block-button.is-style-video .wp-block-button__link) {
  transition: all 0.35s;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  background: var(--wp--preset--color--accent);
  
  &:hover {
    background: var(--wp--preset--color--contrast-2);
  }
  &:active {
    background: var(--wp--preset--color--contrast-2);
  }
  &:focus {
    background: var(--wp--preset--color--contrast-2);
    outline: 2px solid var(--wp--preset--color--accent);
  }
}

:root body :where(.wp-block-button.is-style-video .wp-block-button__link) {
  padding-left: 8px;
  &:before {
    height: 52px;
    width: 52px;
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2252%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M26%200A26%2026%200%200%201%2052%2026A26%2026%200%200%201%2026%2052A26%2026%200%200%201%200%2026A26%2026%200%200%201%2026%200ZM35%2026.1837L20%2035V17L35%2026.1837Z%22%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E");
  }
}

:root body :where(.wp-block-button.is-style-light-video .wp-block-button__link) {
  padding-left: 8px;
  &:before {
    height: 52px;
    width: 52px;
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2252%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M26%200A26%2026%200%200%201%2052%2026A26%2026%200%200%201%2026%2052A26%2026%200%200%201%200%2026A26%2026%200%200%201%2026%200ZM35%2026.1837L20%2035V17L35%2026.1837Z%22%20fill%3D%22%231E1EF6%22%20fill-rule%3D%22evenodd%22%2F%3E%0A%3C%2Fsvg%3E");
  }
}

:root body :where(.wp-block-button.is-style-outline .wp-block-button__link) {
  transition: all 0.35s;
  color: var(--wp--preset--color--accent);
  background: transparent;
  border: 1px solid currentColor;

  &:hover {
    color: var(--wp--preset--color--contrast-2);
  }
  &:active {
    color: var(--wp--preset--color--contrast-2);
  }
  &:focus {
    color: var(--wp--preset--color--contrast-2);
    outline: 2px solid var(--wp--preset--color--accent);
  }
}

:root body :where(.wp-block-button.is-style-light-fill .wp-block-button__link),
:root body :where(.wp-block-button.is-style-light-video .wp-block-button__link) {
  transition: all 0.35s;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);

  &:hover {
    background: var(--wp--preset--color--base-3);
    color: var(--wp--preset--color--accent);
  }
  &:active {
    background: var(--wp--preset--color--base-3);
  }
  &:focus {
    background: var(--wp--preset--color--base-3);
    outline: 2px solid var(--wp--preset--color--accent) !important;
    outline-offset: 1px;
  }
}

:root body :where(.wp-block-button.is-style-light-outline .wp-block-button__link) {
  transition: all 0.35s;
  color: var(--wp--preset--color--base);
  background: transparent;
  border: 1px solid currentColor;

  &:hover {
    color: var(--wp--preset--color--base-3);
  }
  &:active {
    color: var(--wp--preset--color--base-3);
  }
  &:focus {
    color: var(--wp--preset--color--base-3);
    outline: 2px solid var(--wp--preset--color--accent) !important;
    outline-offset: 1px;
  }
}

:root body :where(p.is-style-large) {
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--line-height--large);
}

:root body :where(p.is-style-footnotes) {
  color: var(--wp--preset--color--contrast-3);
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--line-height--medium);
}

:root body :where(ul) {
  list-style: disc;
  padding-left: 1em;
}

:root body :where(ol) {
  list-style: decimal;
  padding-left: 1.75em;
}

/* Blog post specific styles */
:root body:where(.editor-styles-wrapper.post-type-post, .single-post) {
  :where(h1) {
    color: var(--wp--preset--color--accent);
  }
  :where(h2, h3, h4, h5, h6) {
    color: var(--wp--preset--color--contrast-2);
  }

  /* The design has what seems to be h2s as h4 size, 
     so h2 may need to be styled as h4, and h3 as h5 */
  :where(h2) {
    font-size: var(--wp--preset--font-size--x-large);
    line-height: var(--wp--custom--line-height--x-large);
    margin-top: var(--wp--preset--spacing--60);
  }

  :where(h3) {
    font-size: var(--wp--preset--font-size--large);
    line-height: var(--wp--custom--line-height--large);
    margin-top: var(--wp--preset--spacing--40);
  }

  :where(p,ul,ol) {
    margin-block: var(--wp--preset--spacing--40);
  }

  :where(li) {
    margin-block: var(--wp--preset--spacing--30);
  }

  :where(p.is-style-large) {
    margin-block: var(--wp--preset--spacing--40);
  }

  :where(.wp-block-image, .wp-block-quote) {
    margin-block: var(--wp--preset--spacing--70);
  }

  :where(.wp-block-image img) {
    border-radius: 6px;
  }

  :where(.wp-block-group.is-style-callout) {
    background: var(--wp--preset--color--base-3);
    color: var(--wp--preset--color--contrast-2);
    padding: var(--wp--preset--spacing--60);
    border-radius: 6px;
    margin-block: var(--wp--preset--spacing--70);

    :where(.wp-block-separator) {
      border-width: 1px;
      opacity: 0.1;
    }
  }
  
}