.bg__base-column {
    border: 1px solid $clMediumGrey;
    border-right: 0;
    width: 100%;
    transition: width $transition;
    overflow: hidden;
    position: relative;

    &:first-child {
        border-left: 0;
    }

    &.active {
        & > * {
            width: $columnWidth;
        }
    }

    &.inactive {
        width: 50px !important;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        cursor: pointer;
        transition: background-color $transition, width $transition;

        &:hover {
            background-color: mix(white, $clGrey, 50);
        }

        & > div {
            width: 100%;
            height: 100%;

            > .icon {
                width: 50px;
                height: 50px;
                background-color: $clDark;

                animation-name: fadeIn;
                animation-duration: 0.2s;
                animation-delay: 0s;
                animation-fill-mode: both;

                background-position: center center;
                background-size: contain;

                transition: opacity $transition;

                &:hover {
                    opacity: 0.8;
                }
            }

            > .title {
                position: absolute;
                top: 70px;
                left: 13px;
                font-family: $fontHeading;
                font-size: 15px;

                white-space: nowrap;
                transform-origin: top left;
                transform: rotate(-90deg) translateX(-100%);

                animation-name: fadeIn;
                animation-duration: 0.2s;
                animation-delay: 0.3s;
                animation-fill-mode: both;
            }
        }
    }

    // Column specific
    &.bg__static-column.inactive {
        > div > .icon {
            background-color: $clPrimary;
            background-image: $iconMetadataWhiteUrl;
        }
    }

    &.bg__annotation-column.inactive {
        > div > .icon {
            background-color: $clSecondary;
            background-image: $iconAnnotationWhiteUrl;
        }
    }

    // make the column-content scroll when content doesn't fit in screen
    > div > .column-content {
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100% - 50px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}