/*!
* 
* Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
* and/or its subsidiaries and/or its affiliates and/or their licensors.
*     
*/

@import "../variables";
@import "../mixins";
@import "../variables/accordions_vars";

.dlt-accordion {
    @include component-vars(accordion); //Mixin to define all the root variables
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: $accordion-border-radii;
    background: $accordion-color-background; 
    @include box-shadow($accordion-box-shadow);
    border-bottom: $accordion-border-width $accordion-border-style $accordion-color-border;

    li {
        margin-bottom: 0;
    }

    .dlt-accordion-item {

        &:first-child .dlt-accordion-title{ // To change the raidus for the top most item top corners
            border-radius: $accordion-border-radii $accordion-border-radii 0 0;
        }

        &:last-child .dlt-accordion-title{ // To change the raidus for the bottom most item bottom corners
            border-radius: 0 0 $accordion-border-radii $accordion-border-radii;
        }

        &.dlt-accordion-content-active {

            .dlt-accordion-title {
                border-bottom: $accordion-border-width $accordion-border-style $accordion-color-border;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

            .dlt-accordion-content {
                max-height: 1200px;
                padding: $accordion-content-space-top $accordion-content-space-right $accordion-content-space-bottom $accordion-content-space-left;
            }

            .dlt-accordion-arrow {
               margin: 0 18px 0 6px;
               -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
            }
        }

        .dlt-accordion-arrow {
            margin: 0 14px 0 10px;
            height: 24px;
            width: 24px;
            display: inline-block;
            font-size: 1.5rem;
            line-height: 28px;
            color: $accordion-color-icon-interactive-primary;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            transform-origin: center;
            -webkit-transition: all .11s cubic-bezier(.2, 0, .38, .9);
            transition: all .11s cubic-bezier(.2, 0, .38, .9);
        }
    }

    .dlt-accordion-title {
        font-size: $accordion-title-font-size;
        font-weight: $accordion-title-font-weight;
        color: $accordion-color-title;
        outline: none;
        border: none;
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin: 0;
        padding: 1px 0 0 0;
        @include box-shadow(inset 0px 1px 0px 0px $accordion-color-border,
            inset 0px 1px 0px 0px $accordion-color-border);
        border-bottom: $accordion-border-width $accordion-border-style transparent;
        background: $accordion-color-background;

        &:focus,
        &:hover,
        &:active {
            outline: $accordion-border-width-hover $accordion-border-style $accordion-color-primary;
            box-shadow: 0 0.186rem 0 0 transparent;
            outline-offset: -2px;
            border-bottom: $accordion-border-width $accordion-border-style transparent;
            color: $accordion-color-title;
        }

        &:disabled {
            opacity: $accordion-opacity-disabled;
            cursor: not-allowed;

            i {
                opacity: $accordion-opacity-disabled;
            }

            &:hover,
            &:focus {
                @include box-shadow(inset 0px 1px 0px 0px $accordion-color-border,
                    inset 0px 1px 0px 0px $accordion-color-border);
                border-color: $accordion-color-border;
                outline-color: $accordion-color-border;
            }
        }

    }

    .dlt-accordion-content {
        -webkit-transition: all .11s cubic-bezier(.2, 0, .38, .9);
        transition: all .11s cubic-bezier(.2, 0, .38, .9);
        color: $accordion-color-text;
        max-height: 0;
        overflow: hidden;
        padding: 0 $accordion-content-space-right 0 $accordion-content-space-left;

        &:focus {
            outline: $accordion-border-width-hover $accordion-border-style-hover $accordion-color-primary;
            box-shadow: 0 0.186rem 0 0 transparent;
            outline-offset: -2px;
        }

        p {
            font-size: $accordion-content-font-size;
            color: $accordion-color-text;
            margin: 0;
            font-weight: $accordion-content-font-weight;
            line-height: $accordion-content-font-line-height;
        }
    }
}