/*
 * Caledros Basic Blocks - Easy to use Gutenberg blocks
 * Copyright (C) 2025  David Arnado
 * 
 * This file is part of Caledros Basic Blocks.
 * 
 * Caledros Basic Blocks is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.

 * Caledros Basic Blocks is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License along
 * with Caledros Basic Blocks; if not, see <https://www.gnu.org/licenses/>.
 */

/* Mobile overlay*/
.cbb-sidebar-menu {
  position: relative;
}

/*Sidebar menu container*/
.cbb-sidebar-menu__container {
  position: fixed;
  top: 0px;
  bottom: 0;
  right: 0;
  background-color: var(--cbb-light-bg-color, #fff);
  z-index: 1000;
  overflow-y: scroll;
  transform: translateX(102%);
  transition: transform 0.5s;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}

/*The sidebar occupies the whole screen in small devices (smartphones)*/
@media (max-width: 450px) {
  .cbb-sidebar-menu__container {
    width: 100%;
  }
}

/*Show sidebar menu*/
.cbb-sidebar-menu-container--visible {
  transform: translateX(0);
}

/*Sidebar open button*/
.cbb-sidebar-menu__button {
  display: flex;
  flex-direction: column;
  width: max-content;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: var(--cbb-open-btn-border-width, 0px) solid
    var(--cbb-btn-light-color, #333);
}

.cbb-sidebar-menu__button::before,
.cbb-sidebar-menu__button::after {
  content: "";
  width: var(--cbb-open-btn-top-bottom-bar-width, 30px);
  height: var(--cbb-open-btn-bar-height, 3px);
  background-color: var(--cbb-btn-light-color, #333);
  border-radius: var(--cbb-open-btn-bar-border-radius);
}

.cbb-sidebar-menu__button span {
  width: var(--cbb-open-btn-center-bar-width, 38px);
  height: var(--cbb-open-btn-bar-height, 3px);
  background-color: var(--cbb-btn-light-color, #333);
  border-radius: var(--cbb-open-btn-bar-border-radius);
}

/*Sidebar close button*/
.cbb-sidebar-menu__close-button {
  height: 30px;
  width: 30px;
  cursor: pointer;
  position: absolute;
  text-align: center;
  top: var(--cbb-close-btn-position-top, 20px);
  right: var(--cbb-close-btn-position-right, 20px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  border: var(--cbb-close-btn-border-width, 0px) solid
    var(--cbb-btn-light-color, #333);
}
.cbb-sidebar-menu__close-button::before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
  background-color: var(--cbb-btn-light-color, #333);
  height: var(--cbb-close-btn-bar-height, 30px);
  width: var(--cbb-close-btn-bar-width, 2px);
  border-radius: var(--cbb-close-btn-bar-border-radius, 50px);
  transform-origin: center;
}

.cbb-sidebar-menu__close-button::after {
  content: "";
  position: absolute;
  transform: rotate(-45deg);
  background-color: var(--cbb-btn-light-color, #333);
  height: var(--cbb-close-btn-bar-height, 30px);
  width: var(--cbb-close-btn-bar-width, 2px);
  border-radius: var(--cbb-close-btn-bar-border-radius, 50px);
  transform-origin: center;
}

/*Hidden overlay*/
.cbb-sidebar-menu__hidden-overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  background-color: #0000004d;
  animation: reveal 0.5s ease-in-out forwards;
}

.cbb-sidebar-menu__hidden-overlay--visible {
  display: block;
}
/*Hidden overlay animation*/
@keyframes reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*Disable y axis scrolling when overlay is visible*/
body.visible-overlay {
  overflow-y: hidden;
}

/*Adjust top spacing for the admin bar*/
@media (max-width: 782px) {
  body.logged-in .cbb-sidebar-menu__container {
    top: 46px;
  }
}

@media (min-width: 783px) {
  body.logged-in .cbb-sidebar-menu__container {
    top: 32px;
  }
}

/*Adjust top spacing for the admin bar when using sticky navigation*/
@media (max-width: 600px) {
  body.logged-in
    .cbb-mobile-menu-container--sticking-enabled
    .cbb-sidebar-menu__container {
    top: 0px;
  }
}

/*Dark mode*/
/*Sidebar menu container*/
html[data-theme="dark"] .cbb-sidebar-menu__container {
  background-color: var(--cbb-dark-bg-color, #fff);
}

/*Sidebar open button*/
html[data-theme="dark"] .cbb-sidebar-menu__button {
  border: var(--cbb-open-btn-border-width, 0px) solid
    var(--cbb-btn-dark-color, #333);
}

html[data-theme="dark"] .cbb-sidebar-menu__button::before,
html[data-theme="dark"] .cbb-sidebar-menu__button::after {
  background-color: var(--cbb-btn-dark-color, #333);
}

html[data-theme="dark"] .cbb-sidebar-menu__button span {
  background-color: var(--cbb-btn-dark-color, #333);
}

/*Sidebar close button*/
html[data-theme="dark"] .cbb-sidebar-menu__close-button {
  border: var(--cbb-close-btn-border-width, 0px) solid
    var(--cbb-btn-dark-color, #333);
}

html[data-theme="dark"] .cbb-sidebar-menu__close-button::before {
  background-color: var(--cbb-btn-dark-color, #333);
}

html[data-theme="dark"] .cbb-sidebar-menu__close-button::after {
  background-color: var(--cbb-btn-dark-color, #333);
}