/* ----- Sidebar.scss ----- */
@import "../../utils/styles/Theme.scss";

.sidebar {
  width: 100%;
  height: 100svh;

  .sidebar__container {
    width: 100%;

    // Header
    .sidebar__header {
      width: 100%;
      min-height: 80px;

      position: relative;

      // Menu
      .sidebar__menu {
        width: 20px;
        height: 20px;

        @include flexbox;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -10px;

        cursor: pointer;

        .sidebar__menu__icon {
          @include flexbox;

          position: relative;
          transition: transform 0.5s ease-in-out;

          :first-child {
            font-size: $icon-small;

            transform-origin: center center;
          }
        }
      }

      // Logo
      .sidebar__logo {
        width: 100%;
        height: 80px;

        :only-child {
          width: 100%;
          height: 80px;

          @include flexbox;

          .sidebar__logo__sm {
            max-height: 20px;
            width: 30px;
            object-fit: contain;
          }
          .sidebar__logo__lg {
            max-height: 50px;
            width: 200px;
            object-fit: contain;
          }
        }
      }
    }

    // Links
    .sidebar__links {
      width: 100%;
      height: calc(100svh - 80px);
      padding: 0px $padding-10;
      overflow-y: auto;
    }
  }
}
