/* 
 * Copyright 2011-2025, The Trustees of Indiana University and Northwestern
 *   University.  Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
 *   specific language governing permissions and limitations under the License.
 * ---  END LICENSE_HEADER BLOCK  ---
*/

$accordionPadding: 20px;

@function accordion-indent($n) {
  @return -1 * $n * $accordionPadding;
}

#accordion.media-show-page {
  margin-top: 10px;
  position: relative;

  a {
    display: inline-block;
    cursor: pointer;

    &:link,
    &:visited,
    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  .card-title {
    .fa-plus-square,
    .fa-minus-square {
      font-size: 0.9em;
      float: right;
      cursor: pointer;
      border: none;
      background-color: $lightgray;
    }

    .no-show {
      display: none;
    }
  }

  ul,
  li {
    list-style: none;
  }

  li.stream-li {
    position: relative;
  }

  i.now-playing {
    position: absolute;
    color: $link-color;
    left: accordion-indent(1);
  }

  .card-header,
  .facets-header {
    border-bottom: 1px solid #dddddd;
    padding: 0.75rem 1rem 0 1rem;

    ul {
      padding-left: $accordionPadding;
      margin-bottom: 0;
      display: inline-block;
    }

    #expand_button,
    #collapse_button {
      float: right;
      margin-top: -2px;
      font-size: $btn-xs-font-size;
      height: $btn-xs-height;
      padding: $btn-xs-padding;
    }
  }

  .card-body {
    border-top: none;
    position: relative;

    ul {
      padding-left: $accordionPadding;

      i.now-playing {
        top: 3px;
        left: accordion-indent(1);
      }

      ul {
        i.now-playing {
          left: accordion-indent(2);
        }

        ul {
          i.now-playing {
            left: accordion-indent(3);
          }

          ul {
            i.now-playing {
              left: accordion-indent(4);
            }
          }
        }
      }
    }
  }
}
