/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].use[0]!./src/scripts/gutenberg/blocks/side-navigation/styles/style.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/******************************************************************
Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*
SM
Phone sizes
*/
/*
MD
Phone / tablet sizes
*/
/*
LG
Tablet / laptop sizes
*/
/*
XL
Laptop sizes
*/
/*
Custom sizes
*/
/* 
This mixin is so we can have more consistency with the front-end & editor styles 
Add styles here that are not yet supported through theme.json
*/
.keep-all {
  word-break: keep-all !important;
}

.fixed-side-navigation {
  position: fixed;
  top: 45%;
  right: 0;
  height: -webkit-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  background-color: var(--wp--preset--color--dark-blue);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

.fixed-side-navigation__icon-wrapper {
  min-width: 66px;
}

@media only screen and (max-width: 782px) {
  .fixed-side-navigation__icon-wrapper {
    min-width: 47px;
  }
}
.fixed-side-navigation__icon-wrapper .img-wrapper {
  margin: 0.75rem 1rem 0.75rem 0.65rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  border: 2px solid #FFFFFF;
  background-color: var(--wp--preset--color--sea-green);
  border-radius: 100%;
  padding: 8px;
  transition: all 0.3s ease-in-out;
}

.fixed-side-navigation__icon-wrapper .img-wrapper img, .fixed-side-navigation__icon-wrapper .img-wrapper a {
  width: 20px;
  height: 20px;
}

.fixed-side-navigation__icon-wrapper .img-wrapper:last-child {
  border-radius: 5px;
  padding: 5px 3px;
}

.fixed-side-navigation__icon-wrapper .img-wrapper:hover {
  background-color: var(--wp--preset--color--brown);
  transition: all 0.2s ease-in-out;
}

@media only screen and (max-width: 782px) {
  .fixed-side-navigation__icon-wrapper .img-wrapper {
    margin: 0.525rem 0.7rem 0.525rem 0.455rem;
    padding: 5.6px;
  }
  .fixed-side-navigation__icon-wrapper .img-wrapper img, .fixed-side-navigation__icon-wrapper .img-wrapper a {
    width: 14px;
    height: 14px;
  }
  .fixed-side-navigation__icon-wrapper .img-wrapper:last-child {
    padding: 3.5px 2.1px;
  }
}
.fixed-side-navigation__icon-wrapper hr {
  border: 1.5px solid #91B6D0;
  margin-right: 0.65rem;
}

@media only screen and (max-width: 782px) {
  .fixed-side-navigation__icon-wrapper hr {
    margin-right: 0.455rem;
  }
}
.fixed-side-navigation.tuck {
  transition: all 0.3s ease-in-out;
  transform: translateX(70%);
}

/*# sourceMappingURL=style-script.css.map*/