/*
 * Copyright (c) 2022, 2023 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
 *
 * SPDX-License-Identifier: EPL-2.0
*/


#main-sidebar {
  color: @main-sidebar-color;

  .main-sidebar-html-block {
     background:@main-sidebar-bg;
     padding:20px;
     text-align:center;
  }
  .ul-left-nav {
    padding:15px;
    position:relative;
    margin-bottom:0;
    >li.separator {
      border:none;
    }
  }
  .main-sidebar-children {
    padding-left:20px;
  }
  a, a:hover {
    color:@main-sidebar-color;
  }
  .main-sidebar-heading {
    font-size: @main-sidebar-heading-size;
    font-weight: @main-sidebar-heading-weight;

    &:hover {
      text-decoration:none;
    }
  }
  li {
    &:last-child {
      border-bottom:none;
    }
  }
}

#main-sidebar {
  .break-container;
  color: @main-sidebar-color;
  background-color: @main-sidebar-bg;

  // Remove padding from everything but the top menu
  ul:not(:first-child) {
    padding: 0;
  }
  .ul-left-nav {
    padding: 3rem 0 0 0; // to get rid of sidebar padding
  }

  .main-sidebar-heading {
    display: block;
    padding-left: @main-sidebar-padding;
  }

  .main-sidebar-item {
    margin: 0;

    & > a {
      display: inline-block;
      width: 100%;
      padding: 1.5rem;
      background: @main-sidebar-item-bg;
      color: @main-sidebar-item-text-color;
      font-size: @main-sidebar-item-font-size;
      font-weight: @main-sidebar-item-font-weight;
      user-select: none;

      &:hover,
      &.main-sidebar-item-active,
      &[aria-expanded=true] {
        background-color: @brand-primary;
      }
      
      // Chevron Down
      &[aria-expanded=true] .main-sidebar-item-icon {
        content: '\f078';
      }

      // Chevron Up
      &[aria-expanded=false] .main-sidebar-item-icon {
        content: '\f077';
      }
    }
  }

  .main-sidebar-item-icon {
    font-family: var(--fa-style-family-classic);
  }

  .submenu-item {
    &:hover {
      background-color: darken(@white, 5%); // convert to var
    } 

    a {
      display: inline-block;
      width: 100%;
      padding: 1.5rem @main-sidebar-padding;
    }
  }
}

@media (min-width: @screen-md-min) {
  #main-sidebar {
    padding-bottom: 6rem;

    .break-container-reset;
    position: relative;
    background-color: transparent;

    &::before {
      content: "";
      position: absolute;
      display: block;
      width: calc(100% - @main-sidebar-outdent);
      height: 100%;
      margin-left: @main-sidebar-outdent;
      padding: @main-sidebar-padding;
      background-color: @main-sidebar-bg;
    }

    .main-sidebar-item-indented .main-sidebar-heading {
      padding-left: calc(@main-sidebar-outdent + @main-sidebar-padding);
    }

    .main-sidebar-heading[href]:hover {
      color: @brand-primary;
    }

    .main-sidebar-item > a { 
      display: flex;
      justify-content: space-between;
      align-content: center;
      padding-top: 1rem;
      padding-bottom: 1rem;
      padding-right: calc(@main-sidebar-outdent + @main-sidebar-padding);
      cursor: pointer;
      
      &:hover {
        width: calc(100% + 1rem);
        padding-right: calc(@main-sidebar-outdent + @main-sidebar-padding + 1rem);
        animation-name: main-sidebar-expand-right;
        animation-duration: 0.5s;
      }
    }

    .main-sidebar-item-submenu {
      padding: 0;
      background-color: @white;
    }

    .submenu-item {
      &:hover {
        background-color: darken(@white, 5%); // convert to var
      } 

      a {
        display: inline-block;
        width: 100%;
        padding: 1rem calc(@main-sidebar-outdent + @main-sidebar-padding);
      }
    }
  }
}

.sideitem {
  h6 {
    border-bottom: 1px solid lighten(@sideitem-color, 30%);
  }
  ul {
    margin-left:10px;
  }
}

@keyframes main-sidebar-expand-right {
  from {
    width: 100%;
    padding-right: calc(@main-sidebar-outdent + @main-sidebar-padding);
  }

  to {
    width: calc(100% + 1rem);
    padding-right: calc(@main-sidebar-outdent + @main-sidebar-padding + 1rem);
  }
}
