@import '../../layout/page/pageVariables';

$dividerColor: rgba(255, 255, 255, .25);
$prefixDrawerDetails: drawer--details_window;
$prefixPageDetails: page--details_window;

.ui {
    &.#{$prefixDrawerDetails}, &.#{$prefixPageDetails} {
        .ui.info-bar {
            padding: 22px 11px;
        }
    }
    &.#{$prefixDrawerDetails} {
        &-bleed {
            margin: 0 -22px;
        }
    }
    &.#{$prefixPageDetails} {
        &-bleed {
            margin: 0 -#{$pageGutterSm};;
        }
    }
    .#{$prefixDrawerDetails}, .#{$prefixPageDetails} {
        &_columns_container, &_exapndable_columns_container {
            display: flex;
            flex-wrap: wrap;
            margin: -11px;
        }
        &_exapndable_columns_container {
            transition: height 333ms ease-in-out, margin 333ms ease-in-out, opacity 333ms ease-in-out;
            &-contracted {
                margin: 0 -11px;
                opacity: 0;
                visibility: hidden;
            }
            &-contracted-active {
                visibility: visible;
            }
            &-expanded {
                margin: -11px;
                opacity: 1;
                visibility: visible;
            }
        }
        &_column {
            padding: 11px;
            &-divide, &-divide_left {
                display: flex;
                margin-left: 16px;
                position: relative;
                &::before {
                    background-color: $dividerColor;
                    content: '';
                    height: 56%;
                    left: 0;
                    position: absolute;
                    transform: translateY(20%);
                    width: 1px;
                }
            }
            &-divide_left, &-divide_right {
                display: block;
            }
            &-divide_left {
                padding-left: 32px;
            }
        }
        &_column_inner {
            padding: 0 16px;
        }
        &_expandable_toggle_button {
            margin: 0;
        }
    }
}

@media only screen and (min-width: 495px) {
    .ui.#{$prefixPageDetails} {
        .ui.info-bar {
            padding: 22px 22px;
        }
    }
}

@media only screen and (min-width: 496px) {
    .ui.#{$prefixPageDetails} {
        &-bleed {
            margin: 0 -#{$pageGutter496};
        }
        .ui.info-bar {
            padding: 22px 22px;
        }
    }
}

@media only screen and (min-width: 768px) {
    .ui {
        &.#{$prefixDrawerDetails} {
            &-bleed {
                margin: 0 -22px;
            }
            .ui.info-bar {
                padding: 22px;
            }
        }
        .#{$prefixDrawerDetails}, .#{$prefixPageDetails} {
            &_columns_container, &_exapndable_columns_container {
                margin: 0 -16px;
            }
            &_column {
                padding: 0 16px 11px;
                &-divide_left {
                    padding-left: 32px;
                }
            }
        }
    }
}

@keyframes detailsExpandedColumnExpand {
    0% {
        height: 0;
        opacity: 0;
        visibility: hidden;
    }

    1% {
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes detailsExpandedColumnContract {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        height: 0;
        opacity: 0;
        visibility: hidden;
    }
}