@import "variables";
@import "mixins";

$anchor-mms-bg: $gray700 !default;
$anchor-mms-color: $col-prm-c !default;

.mobile-menu {
  li.menu-item {
    transition: 0s;
    &.anchor {
      background-color: $header-bg;
      color: $header-color;
      position: fixed;
      top: var(--header-height);
      width: 100%;
      height: 100%;
      z-index: 99999;
      overflow: auto;
      transition: 0s;
      > a {
        // anchor menu item
        background: $anchor-mms-bg;
        color: $anchor-mms-color;
        transition: 0s;
        padding-left: 4.6rem;
        img {
          display: none;
        }
      }
      i {
        &.hide {
          // back button on anchor
          transform: rotate(90deg) translate(-2px, 0%);
          transition: 0s;
          right: calc(100% - 4rem);
          svg {
            path {
              stroke: $col-prm-c;
            }
          }
        }
      }
    }
    i {
      transform: rotate(-90deg) translate(0%, 0%);
    }
    a {
      transition: 0s;
    }
  }
}
