@use "mixins";
@use "variables";

.fwe-mobile-flyout {
  position: relative;

  .fwe-mobile-flyout-button {
    padding: 0px;
    height: 36px;
    border: none;
    background: none;
    outline: none;
    margin-bottom: 8px;
    margin-right: auto;
    cursor: pointer;
    display: inline-block;
    &::after {
      content: "";
      display: block;
      height: 24px;
      width: 24px;
      background-color: variables.$text;
    }
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        &::after {
          background-color: variables.$hero;
        }
      }
    }
  }

  .fwe-burger-button {
    @extend .fwe-mobile-flyout-button;
    &::after {
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+PC9nPjxnPjxyZWN0IHg9IjMiIHk9IjYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMyIgeT0iMTEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMyIgeT0iMTYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==");
    }
  }
  .fwe-close-button {
    @extend .fwe-mobile-flyout-button;
    &::after {
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+PHBvbHlnb24gcG9pbnRzPSIxNi45NSA4LjQ2NCAxNS41MzYgNy4wNSAxMiAxMC41ODYgOC40NjQgNy4wNSA3LjA1IDguNDY0IDEwLjU4NiAxMiA3LjA1IDE1LjUzNiA4LjQ2NCAxNi45NSAxMiAxMy40MTQgMTUuNTM2IDE2Ljk1IDE2Ljk1IDE1LjUzNiAxMy40MTQgMTIgMTYuOTUgOC40NjQiIGZpbGw9IiMwMDAiLz48L2c+PC9zdmc+");
    }
  }

  .fwe-mobile-flyout-container {
    position: fixed;
    display: flex;
    top: variables.$navbar-height;
    left: 0px;
    width: 384px;
    height: calc(100vh - #{variables.$navbar-height});
    background-color: variables.$white;
    flex-direction: column;
    box-shadow: 0px 1px 4px #00000029;
    overflow: hidden;
    transform: translateX(-105%);
    transition: transform 0.3s ease;
    @media (max-width: variables.$grid-breakpoint-xs) {
      width: 100% !important;
    }
    &.fwe-opened {
      transform: translateX(0%);
    }
  }
}

.fwe-mobile-flyout-page {
  background: variables.$white;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-x: hidden;
  overflow-y: auto;
  @include mixins.custom-scrollbar;

  &.fwe-opened {
    transform: translateX(0%);
  }

  .fwe-page-back {
    cursor: pointer;
    height: 53px;
    display: flex;
    align-items: center;
    background: variables.$background;
    position: relative;
    padding-left: 40px;
    &::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 19px;
      height: 16px;
      width: 16px;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMTZWMGgxNnYxNnoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMTAuMzU0IDQuMzU0IDYuNzA3IDhsMy42NDcgMy42NDYtLjcwOC43MDhMNS4yOTMgOGw0LjM1My00LjM1NC43MDguNzA4eiIvPjwvc3ZnPg==");
    }
    &:hover {
      background: variables.$control;
    }
    div {
      margin-top: -1px;
      margin-bottom: 1px;
    }
  }

  .fwe-mobile-flyout-item-container {
    padding: 24px;
    @media (max-width: variables.$grid-breakpoint-xs) {
      padding: 16px;
    }
  }
}

.fwe-mobile-flyout-item {
  color: variables.$text;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 56px;

  &.fwe-active {
    color: variables.$hero;
  }
}