/* Dashboard navigation rail (apps use Tailwind, but this CSS is served via the Rails asset pipeline). */
.g360-nav-rail{
  width: 4rem;
  transition: width 200ms ease-out;
}

.g360-nav-rail:hover,
.g360-nav-rail:focus-within{
  width: 14rem; /* ~ tailwind w-56 */
}

.g360-nav-rail .g360-nav-rail-label{
  display: none;
}

.g360-nav-rail:hover .g360-nav-rail-label,
.g360-nav-rail:focus-within .g360-nav-rail-label{
  display: inline-block;
}

.g360-nav-rail:hover .g360-nav-rail-item,
.g360-nav-rail:focus-within .g360-nav-rail-item{
  justify-content: flex-start;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.g360-nav-rail .g360-getting-started-icon,
.g360-nav-rail .g360-side-item[aria-current="page"] .g360-getting-started-icon{
  color: var(--accent, #fe581a) !important;
}