// Collapsible columns.
// used in instructions and other expandable sections.

.col-collapse {
    @extend .col-lg-2;
    @extend .col-sm-3;

    @include media-breakpoint-down(lg) {
        .title,
        .indicator {
            font-size: $font-size-sm;
        }
    }

    .col-collapsed & {
        @extend .col-lg-1;
        @extend .col-sm-2;
    }
}

.col-with-collapse {
    @extend .col-lg-12;
    @extend .col-sm-10;
}

.col-collapse-offset {
    @extend .offset-lg-2;
    .col-collapsed & {
        @extend .offset-lg-1;
    }
}

.col-collapsed .hide-title-collapsed .title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.collapse-expand {
    .icon-angle-double-right {
        display:none;
    }
    .col-collapsed &{
        .icon-angle-double-left {
                display:none;
        }
        .icon-angle-double-right {
                display:inline-block;
        }
    }
}
