/**
 * Sass theme for Craft CMS 5 control panel
 *
 * 1. Set brand logo.
 * 1. Set brand color.
 * 2. Fine-tune theme colors (1-5).
 * 3. Additional adjustments as you see fit!
 */

// Set brand logo
$logo-large: url('/path/to/logo-large.png'); // expanded sidebar
$logo-small: url('/path/to/logo-small.png'); // collapsed sidebar

// Main brand color
$brand-color: #01406D;

// Automatically generate a CP theme
$theme-1: lighten($brand-color, 71%);
$theme-2: lighten($brand-color, 68%);
$theme-3: $brand-color;
$theme-4: darken($brand-color, 6%);
$theme-5: darken($brand-color, 11%);

// ========================================================================= //

// Login page
body.login {
  background: $theme-3;
  h1 {
    background-image: $logo-large !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9999px;
    width: 100%;
    height: 120px;
    display: block;
    border-radius: 4px;
  }
  .btn.submit {
    color: $theme-1 !important;
    background-color: $theme-4 !important;
    &:not(.disabled):not(.inactive) {
      &:hover,
      &.hover {
        background-color: $theme-5 !important;
      }
      &:active,
      &.active {
        background-color: $theme-3 !important;
      }
    }
  }
  .alternative-login-methods {
    button {
      color: $theme-2 !important;
    }
  }

  #poweredby {
    opacity: 1;
    path {
      fill: $theme-1;
    }
  }
}
#password-fields,
#forgot-password {
  color: $theme-1 !important;
}

// Sidebar
#global-sidebar {
  background: $theme-3;

  &[data-state="expanded"] #system-info {
    background-image: $logo-large;
    background-size: 60% auto;
    margin-right: 8px;
  }

  &[data-state="collapsed"] #system-info {
    background-image: $logo-small;
    background-size: 80% auto;
  }

  #system-info {
    margin-top: 6px;
    height: 60px;
    flex: 0 0 74px;
    background-color: $theme-3 !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    text-indent: -9999px;
    #site-icon,
    #system-name {
      display: none;
      h2:after {
        background-image: none;
      }
    }
  }

  .global-nav > ul {
    margin-top: 14px;
  }

  a {
    color: $theme-1;
    &:hover,
    &.active,
    &:active {
      color: var(--nav-item-fgColor-active);
      background-color: var(--nav-item-bgColor-active);
    }
  }
  :not(.has-subnav) > a.sel {
    color: var(--nav-item-fgColor-active);
    background-color: var(--nav-item-bgColor-active);
  }

  craft-disclosure {
    button.hairline {
      color: $theme-2;
      background-color: $theme-4 !important;
      &:hover,
      &.active,
      &:active {
        color: $theme-2;
        background-color: $theme-4 !important;
      }
    }
  }

  .nav-item.sel {
    craft-disclosure {
      button.hairline {
        color: $theme-2;
        background-color: $theme-4 !important;
        &:hover,
        &.active,
        &:active {
          color: $theme-2;
          background-color: $theme-4 !important;
        }
      }
    }
  }

  craft-disclosure#sidebar-trigger {
    color: $theme-2;
    button.hairline {
      &:hover,
      &.active,
      &:active {
        color: $theme-2;
        background-color: $theme-4 !important;
      }
    }
  }

}

// Buttons
.btn.submit {
  color: $theme-1 !important;
  background-color: $theme-3 !important;
  &:not(.disabled):not(.inactive):not(.loading) {
    &:hover,
    &.hover,
    &:focus {
      background-color: $theme-4 !important;
    }
    &:active,
    &.active,
    &[aria-expanded=true] {
      background-color: $theme-5 !important;
    }
  }
}

// // Hide the ever-present Utilities badge
// li#nav-utilities a .badge {
//    display: none;
// }
