/*  imported from mobileSidebar.less  */

@SIDEBAR_WIDTH: 280px;

.src-mobileLayout-styles-mobileSidebar__root {
  display: flex;
  position: fixed;
  top: 0px;
  left: 0px;
  width: calc(100% + @SIDEBAR_WIDTH);
  height: 100%;
  z-index: 991;
  animation: src-mobileLayout-styles-mobileSidebar__x 0.3s ease-in-out;

  &.src-mobileLayout-styles-mobileSidebar__show {
    @keyframes src-mobileLayout-styles-mobileSidebar__sidebar-show-animation {
      from {
        transform: translateX(calc(-1 * @SIDEBAR_WIDTH));
      }
      to {
        transform: translateX(0px);
      }
    }

    transform: translateX(0px);
    animation-name: src-mobileLayout-styles-mobileSidebar__sidebar-show-animation;
  }

  &.src-mobileLayout-styles-mobileSidebar__hide {
    @keyframes src-mobileLayout-styles-mobileSidebar__sidebar-hide-animation {
      from {
        transform: translateX(0px);
      }
      to {
        transform: translateX(calc(-1 * @SIDEBAR_WIDTH));
      }
    }

    transform: translateX(calc(-1 * @SIDEBAR_WIDTH));
    animation-name: src-mobileLayout-styles-mobileSidebar__sidebar-hide-animation;
  }
}

.src-mobileLayout-styles-mobileSidebar__sidebar {
  width: @SIDEBAR_WIDTH;
  height: 100%;
  min-height: initial;
  overflow: scroll;
}

.src-mobileLayout-styles-mobileSidebar__iconWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:first-child {
    margin: 0px 0px 0px 25px;
  }

  &> svg {
    padding: 20px;
    width: 65px;
    height: 65px;
    cursor: pointer;
  }
}

.src-mobileLayout-styles-mobileSidebar__hideBlock {
  width: calc(100% - @SIDEBAR_WIDTH);
  height: 100%;
  cursor: pointer;
  animation: src-mobileLayout-styles-mobileSidebar__x 0.3s ease-in-out;

  &.src-mobileLayout-styles-mobileSidebar__show {
    @keyframes src-mobileLayout-styles-mobileSidebar__hideBlock-show-animation {
      from {
        background: rgba(0, 0, 0, 0);
      }
      to {
        background: rgba(0, 0, 0, 0.2);
      }
    }

    background: rgba(0, 0, 0, 0.2);
    animation-name: src-mobileLayout-styles-mobileSidebar__hideBlock-show-animation;
  }

  &.src-mobileLayout-styles-mobileSidebar__hide {
    @keyframes src-mobileLayout-styles-mobileSidebar__hideBlock-hide-animation {
      from {
        background: rgba(0, 0, 0, 0.2);
      }
      to {
        background: rgba(0, 0, 0, 0);
      }
    }

    background: rgba(0, 0, 0, 0);
    animation-name: src-mobileLayout-styles-mobileSidebar__hideBlock-hide-animation;
  }
}