@layer theme, utils;

@import './typography.css';
@import './lists.css';
@import './notices.css';
@import './breakdance-presets.css';
@import './search-and-filter.css';

@media (width < 600px) {
  html {
    margin-top: 0 !important;
  }

  #wpadminbar {
    display: none !important;
  }
}

:root {
  --taxonomy-badge-colour: var(--bde-brand-primary-color);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .category-link {
    position: relative;

    h6 {
      margin: 0.25em 0;
    }

    &::after {
      content: '';
      background-color: var(--bde-brand-primary-color);
      mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M%2018.71875%206.78125%20L%2017.28125%208.21875%20L%2024.0625%2015%20L%204%2015%20L%204%2017%20L%2024.0625%2017%20L%2017.28125%2023.78125%20L%2018.71875%2025.21875%20L%2027.21875%2016.71875%20L%2027.90625%2016%20L%2027.21875%2015.28125%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      /* You'll need to set dimensions for the ::after pseudo-element */
      display: inline-block;
      width: 18px;
      height: 18px;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}