@import "_mixins", "_vars";

.ac-container{
    margin: $accordion-margin-top-bottom auto $accordion-margin-left-right auto;
    text-align: left;

    > input {
        display: none;

        &:checked + label {
            @include gradient-top-bottom($accordion-active-color-start, 0, $accordion-active-color-end, 100, $accordion-active-background);
            color: $accordion-active-foreground;

            + section {
                display: inherit;
            }
        }

        + label + section {
            display: none;
        }
    }

    label {
        display: block;
        padding: $accordion-padding-top-bottom $accordion-padding-left-right;
        position: relative;
        z-index: 20;
        margin-top: -1px;
        cursor: pointer;
        color: $accordion-inactive-foreground;
        font-size: $accordion-font-size;
        border: $accordion-border-size solid $accordion-border-color;
        @include border-radius($accordion-border-radius);
        @include gradient-top-bottom($accordion-inactive-color-start, 0, $accordion-inactive-color-end, 100, $accordion-inactive-background);

        &:hover {
            @include gradient-top-bottom($accordion-hover-color-start, 0, $accordion-hover-color-end, 100, $accordion-hover-background);
        }
    }

    > section {
        background: $content-box-background-color;
        overflow: hidden;
        height: auto;
        position: relative;
        z-index: 10;
        border-left: $accordion-border-size solid $accordion-border-color;
        border-right: $accordion-border-size solid $accordion-border-color;
        padding: $accordion-padding;
    }
}