@value colors: 'src/common-ui/colors.css';
@value color1, color4, color6, color2, radius3, color7, color3, color14 from colors;

.masterContainer {
    position: sticky;
    background-color: white;
    z-index: 2;
    width: 440px;
    margin-left: -5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid color14;
}

.container {
    display: flex;
    align-self: flex-start;
    margin: 5px 3px 4px 3px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.unfoldAllBtn {
    margin-right: -8px;
    color: color3;

    &:disabled {
        display: none;
    }
}

/* Nice if we move this type of stuff somewhere for easier re-use, like colors, fonts, etc. */
.btn {
    composes: nakedButton from 'src/common-ui/elements.css';
    color: color3;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    outline: none;
    margin-right: 1px;
    background-color: transparent;
    white-space: nowrap;

    &:disabled {
        background-color: color7;
        cursor: auto;
    }

    &:focus {
        background-color: color1;
    }
}

.notesBox {
    display: flex;
    flex-direction: row;
    align-self: flex-start;
    margin-left: 10px;
    margin-bottom: 5px;
    width: 100%;
    justify-content: space-between;
}

.notesBtn {
    &:disabled {
        &::after {
            width: 10px;
            height: 10px;
            background-color: black;
            display: flex;
            position: absolute;
            top: 1px;
        }
    }
}

.imgContainer {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;

    & img {
        max-height: 25px;
        max-width: 25px;
        height: 100%;
        width: 100%;
    }
}

.pages {
    margin-right: 2px;
}

.pageSwitch {
    display: flex;
    justify-content: space-between;
    margin: 0 2px 0px -3px;
    padding-right: 20px;
    width: 100%;

    & * {
        font-size: 11px;
    }
}
