/* Twisties
   ========================================================================== */

/**
 * Collapsible and non-collapsible summary/details boxes.
 *
 * Example HTML:
 *
 * <section class="txp-details">
 *     <h3 class="txp-summary expanded">
 *         <a>Heading (lever)</a>
 *     </h3>
 *     <div class="toggle">
 *         Content
 *     </div>
 * </section>
 *
 * <section class="txp-details">
 *     <h3>Heading</h3>
 *     <div>
 *         Content
 *     </div>
 * </section>
 */

.txp-details {
    margin: 1em 0;

    @if $flat-theme < 1 {
        border-right: 1px solid $color-border-extra-light;
        border-left: 1px solid $color-border-extra-light;

        > div {
            border-bottom: 1px solid $color-border-extra-light;
        }
    } @else {
        border-right: 1px solid $color-border;
        border-left: 1px solid $color-border;

        > div {
            border-bottom: 1px solid $color-border;
        }
    }

    clear: both;
    background: $color-background-box;
}

@include dark-mode {
    .txp-details {
        @if $flat-theme < 1 {
            border-right: 1px solid $dark-color-border-extra-light;
            border-left: 1px solid $dark-color-border-extra-light;

            > div {
                border-bottom: 1px solid $dark-color-border-extra-light;
            }
        } @else {
            border-right-color: $dark-color-border;
            border-left-color: $dark-color-border;

            > div {
                border-bottom-color: $dark-color-border;
            }
        }

        background: $dark-color-background;
    }
}

/**
 * Styling for summary headings.
 */

h3.txp-summary,
.txp-details > h3 {
    @include gradient-linear($color-gradient-from, $color-gradient-to);

    position: relative;
    height: 2em; // 26px / 13px
    margin: 0;

    @if $flat-theme < 1 {
        border-top: 1px solid $color-border-light;
        border-bottom: 1px solid $color-border-dark;
    } @else {
        border-top: 1px solid $color-border;
        border-bottom: 1px solid $color-border;
    }

    font-size: 1rem;
    font-weight: bold;
    line-height: 2; // 26px / 13px
}

@include dark-mode {
    h3.txp-summary,
    .txp-details > h3 {
        @include gradient-linear($dark-color-gradient-to, $dark-color-gradient-from);

        @if $flat-theme < 1 {
            border-top-color: $dark-color-border-light;
            border-bottom-color: $dark-color-border-extra-light;
        } @else {
            border-top-color: $dark-color-border;
            border-bottom-color: $dark-color-border;
        }
    }
}

/**
 * Padding for non-collapsible summary headings.
 *
 * For collapsible summary headings the padding is done via the `a` tag.
 */

.txp-details > h3:not(.txp-summary) {
    padding: 0 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * Additonal styling for lever summary headings.
 */

h3.txp-summary a {
    display: block;
    padding: 0 2em 0 1em;
    overflow: hidden;
    color: $color-text-heading;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
        color: $color-text-heading;
        text-decoration: none;
    }

    &::after {
        @include hide-text;

        content: "\2193";
        display: block;
        position: absolute;
        z-index: 10;
        top: 0.5625em; // 9px / 16px
        right: 0.625em; // 10px / 16px
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-width: 0.25em 0 0.25em 0.25em;
        border-left-color: $color-text;
        opacity: 0.5;
        font-size: 16px;
    }

    &:hover::after {
        opacity: 1;
    }
}

@include dark-mode {
    h3.txp-summary a {
        color: $dark-color-text-heading;

        &:hover {
            color: $dark-color-text-heading;
        }

        &::after {
            border: 0 solid transparent;
            border-width: 0.25em 0 0.25em 0.25em;
            border-left-color: $dark-color-text;
            opacity: 0.6;
        }

        &:hover::after {
            opacity: 1;
        }
    }
}

/**
 * Additonal styling for lever summary headings - expanded state.
 */

h3.txp-summary.expanded a::after {
    content: "\2191";
    top: 0.6875em; // 11px / 16px
    right: 0.5625em; // 9px / 16px
    border: 0 solid transparent;
    border-width: 0.25em 0.25em 0;
    border-top-color: $color-text;
}

@include dark-mode {
    h3.txp-summary.expanded a::after {
        border: 0 solid transparent;
        border-width: 0.25em 0.25em 0;
        border-top-color: $dark-color-text;
    }
}

/**
 * Pad left and right of inner details content container.
 */

.toggle,
.txp-details > div {
    padding: 0 1em;
}

/**
 * Tables within summary/details boxes.
 */

.txp-details .txp-listtables {
    margin: 1em 0;
}

/**
 * Inline date and time form fields within summary/details boxes.
 */

.txp-details .txp-form-field {
    &.date,
    &.time {
        display: inline-block;
        margin-bottom: 0;
    }

    &.date {
        margin-right: 1em;
    }

    &.posted-now {
        margin-bottom: 0;
    }
}

[dir="rtl"] .txp-details .txp-form-field.date {
    margin-right: 0;
    margin-left: 1em;
}