@value colors: '../../common-ui/colors.css';
@value color4, color5, color6, color12 from colors;

/* stylelint-disable declaration-no-important */

.link {
    text-decoration: none;

    &:focus {
        outline: 0;
    }
}

.item {
    text-decoration: none;
    display: flex;
    color: #3a2f45;
    align-items: center;
    cursor: default;
    font-weight: 400;
    height: 40px;
    padding-left: 20px;

    &:hover,
    &:focus {
        outline: 0;
        color: #3a2f45;
        font-weight: 400;
    }
}

.disabled {
    &:hover {
        background-color: none;
    }
}

.itemBtn {
    border: none;
    width: 100%;
    font-size: 1em;
    cursor: pointer;
    font-weight: 400;
    color: #3a2f45;
    padding-left: 20px;
    background: none !important;

    &:disabled {
        color: #3a2f45;
        cursor: unset;
        background: none;

        &:hover {
            cursor: not-allowed;
            font-weight: 400;
            color: #3a2f45;
        }
    }

    &:hover,
    &:focus {
        outline: 0;
        color: #3a2f45;
        font-weight: 400;
    }
}

.clickableIcon {
    cursor: pointer;
    color: rgb(62, 185, 149);

    &:hover,
    &:focus {
        color: rgb(5, 154, 111);
    }
}

.clickableIconNeg {
    color: rgb(255, 74, 85);
    padding-left: 10px;

    &:hover,
    &:focus {
        color: rgb(217, 24, 36);
    }
}

.splitBtn {
    display: flex;
    width: auto;

    & > .itemBtn {
        justify-content: left;
    }
}

.button {
    composes: nakedSquareButton from '../../common-ui/elements.css';
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    opacity: 0.8;

    &:hover {
        opacity: 1;
    }
}

.icon {
    font-size: 26px;
}

.customIcon {
    width: 25px;
    height: 25px;
    align-self: center;
    outline: 0;
    margin-right: 15px;

    background-position: center;
}

.settings {
    composes: nakedSquareButton from '../../common-ui/elements.css';
    background-image: url('/img/settings.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 25px;
    height: 25px;
    align-self: center;
    outline: 0;
    background-position: center;
    margin-right: 5px;
    cursor: pointer;
}

.help {
    composes: nakedSquareButton from '../../common-ui/elements.css';
    background-image: url('/img/help.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    width: 25px;
    height: 25px;
    align-self: center;
    outline: 0;
    background-position: center;
    margin-right: 10px;
    cursor: pointer;
}

.buttonIcons {
    background-size: 20px;
}

.linkIcon {
    background-image: url('/img/link.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    float: left;
    opacity: 0.8;
}

.sidebarIcon {
    background-image: url('/img/ribbonOn.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    float: left;
    opacity: 0.8;
}

.highlighterIcon {
    background-image: url('/img/highlightOff.svg');
    background-repeat: no-repeat;
    background-size: 24px;
    float: left;
    opacity: 0.8;
}

.PDFIcon {
    mask-image: url('/img/file-pdf.svg');
    background-color: #3a2f45;
    mask-repeat: no-repeat;
    mask-size: 20px;
    mask-position: center center;
    opacity: 0.8;
}

.searchIcon {
    background-image: url('/img/search.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    opacity: 0.8;
    float: left;
}

.badge {
    color: #fff;
    background-color: color12;
    border-radius: 3px;
    padding: 1px 5px;
    position: absolute;
    width: fit-content;
    font-size: 13px;
    margin-top: -15px;
    margin-left: 15px;
}

.subTitle {
    margin-top: auto;
    font-size: 12px;
    color: #3a2f45;
    margin-bottom: 0px;
    opacity: 0.7;
}
