@import '../styles/variables.scss';

.main {
    color: $dark-gray;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    text-decoration: underline;
    align-self: flex-start;

    &.underlineOnHover {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }

    &.noOverflow {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .innerContainer {
        width: 100%;
        height: 100%;
        position: relative;
    }
}

.help {
    margin-inline-start: 3px;
}

.icon {
    margin-inline-end: 5px;
}

.arrowIcon {
    font-size: 0.8em;
    color: $text-on-light;
    text-decoration: none;
    float: right;
    padding: 0.4em 0 0.3em 0.3em;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.blueLink {
    color: $link;
    font-size: 14px;
    font-family: $duda-font;
    font-weight: 500;
    padding-block-start: 16px;
    padding-inline-end: 0;
    padding-block-end: 6px;
    padding-inline-start: 0;
}