// stylelint-disable max-nesting-depth, selector-max-compound-selectors

.container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.main-column {
    z-index: 1;
    width: 70%;
    min-width: 300px;

    &.mobile {
        width: 100%;
    }

    &.is-closed {
        flex: 1;
        width: calc(100% - 72px);
    }

    h3 {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 70%;
    }
}

.right-column {
    border-left: 1px solid #ddd;
    display: inline-flex;
    flex-basis: 300px;
    flex-direction: column;
    flex-grow: 1;
    width: calc(30% - 72px);
    min-width: 400px;

    &.is-closed {
        display: none;
    }
}

.right-buttons {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ddd;
    z-index: 1;
    width: 72px;
    min-width: 72px;

    &.mobile {
        flex-direction: row;
        width: 100%;
        margin-bottom: 10px;
    }
}

.slide-in {
    animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
    100% { transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}
