.account-content {
    @extend .row;

    .account-content-aside {
        @extend .col-lg-3;
        @extend .col-xl-2;
    }

    .account-content-main {
        @extend .col-lg-9;
        @extend .offset-xl-1;
        @extend .col-xl-9;
    }
}

.account-recover-password-info {
    margin-bottom: $spacer;
}

.account-guest-auth-info {
    margin-bottom: $spacer;
}

.account-welcome {
    padding-top: $spacer;
    margin-bottom: $spacer-lg;
}

.account-breadcrumb {
    margin-bottom: $spacer-lg;
}

.account-item-children {
    background-color: $gray-100;
    order: 10;
    margin: 12px 0;
    padding: 16px;

    // Dynamic indentation of nested line items
    @for $i from 1 through 10 {
        $margin: ($i + 0.5) * 18px;
        .nesting-level-#{$i} {
            margin-left: $margin;
        }
    }

    .account-item-children-elements {
        padding: 12px 0 0;
    }

    .account-item-headline {
        padding: 0;
        font-weight: $font-weight-semibold;
    }

    .account-item-collapse {
        margin: 0;
    }

    .account-item-collapse-container,
    .account-item-child-label {
        padding: 0;
    }

    .account-item-collapse-icon-container {
        padding: 0;
        text-align: right;
    }

    .account-item-collapse-button {
        background-color: transparent;
        border-style: none;

        &:focus {
            outline: none;
        }
    }

    .account-item-collapse-button > .account-item-collapse-icon {
        transform: rotate(180deg);
        transition: all 0.2s ease-out;
    }

    .account-item-collapse-button.collapsed > .account-item-collapse-icon {
        transform: rotate(0deg);
    }

    .account-item-children-element {
        margin: 0;
        padding: 8px 4px 0;
    }

    .account-item-children-element > .nesting-level-0 {
        list-style: none;
    }

    .account-item-children-element:last-child {
        border-style: none;
    }

    .account-item-child-label-bullet {
        display: list-item;
    }

    .account-item-children-element-divider:last-child {
        display: none;
    }

    .account-item-child-total-price {
        padding: 0;
        text-align: right;
        font-weight: $font-weight-semibold;
    }

    .account-item-children-element-divider {
        border-top: 1px solid $sw-border-color;
        margin: $spacer-md 0;
    }
}

@include media-breakpoint-down(lg) {
    .account-content-aside {
        display: none;
    }
}

@include media-breakpoint-up(xl) {
    .account-item-children {
        margin: 0 30px 12px 96px;
    }
}
