@use '~/styles/variables' as var;

.grw-sidebar-nav :global {
  $sidebar-nav-button-height: 55px;

  %fukidashi-for-active {
    position: relative;

    // speech balloon
    &:after {
      position: absolute;
      right: -0.1em;
      display: block;
      width: 0;
      content: '';
      border: 9px solid transparent;
      border-right-color: white;
      border-left-width: 0;
      transform: translateY(-#{$sidebar-nav-button-height / 2});
    }
  }

  height: 100vh;

  .btn {
    width: var.$grw-sidebar-nav-width;
    line-height: 1em;
    border-radius: 0;
    box-shadow: none !important;

    // icon opacity
    &:not(.active) {
      i {
        opacity: 0.4;
      }
      &:hover,
      &:focus {
        i {
          opacity: 0.7;
        }
      }
    }
  }

  .grw-sidebar-nav-primary-container {
    .btn {
      padding: 1em;
      i {
        font-size: 2.3em;
      }

      &.active {
        @extend %fukidashi-for-active;
      }
    }
  }

  .grw-sidebar-nav-secondary-container {
    position: fixed;
    bottom: 1.5rem;

    .btn {
      padding: 0.9em;
      i {
        font-size: 1.5em;
      }
    }
  }
}