@layer theme, utils;

@import './typography.css';
@import './lists.css';
@import './notices.css';

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

  #wpadminbar {
    display: none !important;
  }
}

/* Convert REM to PX */
html {
  font-size: 62.5%;
}

/* Gallery Slider - Arrows - calc() formatting not working in Breakdance  */
.gallery-slider {
  --swiper-button-width: 55px;
  --swiper-button-height: 38px;
  --section-width: 1120px;

  @media screen and (max-width: 1119px) {
    --section-width: 100%;
  }

  .swiper-button-next {
    top: calc(var(--image-height) + 15px);
    right: initial;
    bottom: initial;
    left: calc(calc(50% - calc(var(--section-width) / 2)) + var(--section-width) - calc(var(--bde-section-horizontal-padding)) - 55px);;
    transform: translateY(50%);
    width: var(--swiper-button-width);
    height: var(--swiper-button-height);
    border: 1px solid black;
    border-radius: 60px;
  }
  .swiper-button-prev {
    top: calc(var(--image-height) + 15px);
    right: initial;
    bottom: initial;
    left: calc(calc(50% - calc(var(--section-width) / 2)) + var(--section-width) - calc(var(--bde-section-horizontal-padding)) - 120px);;
    transform: translateY(50%);
    width: var(--swiper-button-width);
    height: var(--swiper-button-height);
    border: 1px solid black;
    border-radius: 60px;
  }
}