$drawer-small: 40px;
$drawer-large: 260px;
$gutter-width: $grid-gutter-width/2;

.main-content {
  padding-left: $drawer-small + $gutter-width;
  padding-right: $gutter-width;
  padding-top: $admin-vertical-padding;
  background-color: $admin-content-background-color;
  position: absolute;
  width: 100%;

  &.maximized {
    padding-left: $drawer-large + $gutter-width;
  }
}

// .sidebar is a class on the div
.sidebar {
  background-color: $admin-sidebar-background-color;
  min-height: 100vh;
  padding-bottom: 2rem;
  position: absolute;
  transition: width 0.1s;
  width: $drawer-small;
  z-index: 1000;

  &.maximized {
    width: $drawer-large;

    .h5,
    .sidebar-action-text,
    .profile,
    .collapse-toggle::after {
      opacity: 1;
    }

    .sidebar-toggle {
      transform: rotate(-180deg);
    }

    .nav-pills > li {
      width: 100%;

      a {
        padding-left: 24px;
      }

      ul > li a {
        padding-left: 52px;
      }
    }

    .fa {
      width: 15px;
    }
  }

  .sidebar-toggle {
    cursor: pointer;
    background-color: $body-background-color;
    border-radius: 50%;
    line-height: 18px;
    position: absolute;
    right: -10px;
    text-align: center;
    width: 18px;
    z-index: 1001;
  }

  a {
    color: $admin-sidebar-link-color;
  }

  a:hover {
    color: $admin-sidebar-link-hover-color;
  }

  .sidebar-action-text {
    opacity: 0;
  }

  .h5 {
    color: $admin-sidebar-section-heading-color;
    opacity: 0;
    font-size: 12px;
    margin: 15px 0 0 0;
    padding: 10px 10px 5px 20px;
    text-transform: uppercase;
  }

  .profile {
    opacity: 0;
    background-color: $admin-sidebar-profile-background-color;
    padding: 15px 10px;

    .profile-image {
      text-align: center;
    }

    .profile-data {
      text-align: center;
      .profile-data-name {
        color: $admin-sidebar-link-color;
      }
    }
  }

  // .nav is the ul that holds the sidebar items
  .nav {
    margin-left: 0;
    margin-right: 0;

    li {
      white-space: nowrap;

      > a:hover, > a:focus {
        text-decoration: none;
        background-color: $admin-sidebar-link-background-color;
      }
    }
    
    li .fa {
      margin-right: $input-btn-padding-x;
    }
  }

  .nav-pills > li {
    > a {
      border-radius: 0;
    }

    > a.collapse-toggle.nav-link {
      background-color: unset;

      &:hover {
        background-color: $admin-sidebar-link-background-color;
      }
    }

    &.active > a,
    &.active > a:focus,
    &.active > a:hover {
      text-decoration: none;
      background-color: $admin-sidebar-link-background-color;
      color: $admin-sidebar-link-hover-color;
    }
  }

  // submenu items
  .collapse-toggle {
    margin-bottom: 0;

    &::after {
      content: "❯";
      opacity: 0;
      position: absolute;
      right: $gutter-width;
      transform: rotate(90deg);
    }

    &.collapsed {
      border-bottom: 0;

      &::after {
        transform: rotate(0deg);
        transition: transform 0.1s ease;
      }
    }
  }
}