// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the
//          version in your base theme's directory,
//          for example alta/widgets/_oj.alta.collapsible.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@import "../../utilities/oj.utilities";

//--------------------------------------------------------

// include dependencies
@if $includeCollapsibleClasses != false {
  @include module-include-once("common.collapsible") {

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-collapsible:not(.oj-complete) {
        visibility: hidden;
      }
    }

    oj-collapsible {
      display: block;
    }

    .oj-collapsible {
      margin-bottom: 10px;
      -webkit-tap-highlight-color: transparent;
    }

    /* collapsible with "showDetail" style */
    /* ------------------------------------*/
    /*
     * this is the default style for collapsible header
     */
    .oj-collapsible-header {

      color: $headerTextColor;
      
      display: flex;
      align-items: center;
      flex-grow: 1;
      position: relative;
      // padding: 5px 0 3px 0;
      margin: 0;
    }

    .oj-collapsible-header-wrapper {

      display: flex;
      align-items: center;
      position: relative;
      padding: var(--oj-core-spacing-1x) 0;
      margin: 0;

    }
  
    /*
     * this is the default style for collapsible content
     */
    .oj-collapsible-content {

      color: $textColor;

      background-color: transparent;
      padding: 4px 0 0;
      margin: 0;
    }

    /*
     * add more padding between header and collapsible content when header has a border
     */
    .oj-header-border + .oj-collapsible-wrapper > .oj-collapsible-content {
      padding-top: 7px;
      padding-bottom: 4px;
    }

    /*
     * specify sizes for h1 - h4 collapsible header
     */
    h1.oj-collapsible-header {

      font-size: $header1FontSize;

    }

    h2.oj-collapsible-header {

      font-size: $header2FontSize;

    }

    h3.oj-collapsible-header {

      font-size: $header3FontSize;

    }

    h4.oj-collapsible-header {

      font-size: $header4FontSize;

    }

  /*
    * ignore original header border, it's moved to the wraper
    */
    .oj-collapsible-header.oj-header-border {

      border: 0;
      padding-top: 0;
      padding-bottom: 0;

    }
  
    /*
     * applied to the disabled collapsible header
     */
    .oj-collapsible.oj-disabled .oj-collapsible-header {

      color: $textColorDisabled;

    }

    /*
     * remove top padding for the first nested collapsible
     */
    .oj-collapsible-content > .oj-collapsible:first-child > .oj-collapsible-header-wrapper {
      padding-top: 0;
    }

    /* collapsible content transition effects */
    /* -------------------------------------- */

    /*
     * transtion properties and duration
     */
    .oj-collapsible-transition {

      transition: max-height $collapsibleAnimationDuration;

    }

    /*
     * applied to the wrapper of the collapsible content.
     */
    .oj-collapsible-wrapper {
      border: 0;
      padding: 0;
      margin:0;
    }


    /* suppress all browser decorations of anchors in the header */
    /* --------------------------------------------------------- */
    .oj-collapsible-header-wrapper a,
    .oj-collapsible-header-wrapper a:active,
    .oj-collapsible-header-wrapper a:visited,
    .oj-collapsible-header-wrapper a:hover,
    .oj-collapsible-header-wrapper a:focus {
      text-decoration: none;
    }


    /* disclosure icons for headers */
    /* -----------------------------*/

    .oj-collapsible-header-icon {
      // padding needed to make this big enough for touch screens
      padding: 5px 3px 5px 5px;
      // we don't want the focus ring to include the padding, so
      // outline back in
      outline-offset: -5px;
    }

    .oj-collapsible-header-icon:not(.oj-focus-highlight):focus {
      outline: none;
    }


    /*
     * set hand cursor while over the clickable area
     */
    .oj-collapsible-header-wrapper.oj-hover * {
      cursor: pointer;
    }

    /*
     * applied to the disclosure icon
     */
    .oj-collapsible-header-wrapper .oj-collapsible-header-icon,
    .oj-collapsible-header-wrapper .oj-collapsible-header-icon:hover {

      color: $iconColorDefault;

    }

    /*
     * applied to the disclosure icon when it's hovered
     * add .oj-collapsible-header .oj-collapsible-header-icon.oj-hover
     * to override color set in a:hover.oj-clickable-icon-nocontext
     */
    .oj-collapsible-header-wrapper.oj-hover .oj-collapsible-header-icon,
    .oj-collapsible-header-wrapper .oj-collapsible-header-icon.oj-hover {

      color: $iconColorHover;

    }

    /*
     * applied to the disclosure icon when it's active
     */
    .oj-collapsible-header-wrapper.oj-active .oj-collapsible-header-icon,
    .oj-collapsible-header-wrapper .oj-collapsible-header-icon.oj-active {

      color: $iconColorActive;

    }

    /*
     * For disabled header icons
     */
    .oj-collapsible.oj-disabled > .oj-collapsible-header-wrapper > .oj-collapsible-header-icon {

        color: $iconColorDisabled;
        opacity: $opacityDisabled;

    }
  }
}