@import '../styles/variables';

.main {
    font-family: $duda-title-font;
    flex: 1 1 auto;
    cursor: inherit;
    display: block;
    color: $font-dark-gray;
    font-size: 14px;
    padding-block-start: 10px;
    padding-block-end: 10px;
    word-wrap: break-word;

    &.afterText::after {
        content: attr(data-after-text);
    }

    &.inheritColor {
        color: inherit;
    }

    :global {
        .additionalDescription {
            font-style: italic;
            font-size: 13px;
            color: $font-light-gray;
            display: inline-block;
            font-weight: normal;
        }
    }

    &.bullet {
        display: list-item;
    }

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

    &.inline {
        display: inline-block;
    }

    &.smallerText {
        font-size: 13px;
    }

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

    &.noWhiteSpaceWrap {
        white-space: nowrap;
    }

    & + .main.fixLastPadding {
        padding-block-start: 0;
    }

    &.noflex {
        flex: 0 0 auto;
    }

    &.underline {
        text-decoration: underline;
    }

    &.noPaddingTop {
        padding-block-start: 0;
    }

    &.noPaddingBottom {
        padding-block-end: 0;
    }

    &.descriptionLabel {
        font-style: italic;
        font-size: 13px;
        color: $font-light-gray;

        :global(.helpIcon) {
            color: $font-light-gray;
        }
    }

    &.disabledText {
        color: #c4c4c4;
    }

    &.clickable {
        color: $clickable-item;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }
    }

    &.leftLabel {
        font-size: 15px;
        font-family: $duda-title-font;
        padding-block-start: 10px;
        padding-inline-end: 101px;
        padding-block-end: 10px;
        padding-inline-start: 0;
    }

    &.subtitle {
        text-align: center;
        font-size: 12px;
        padding-block-start: 10px;
        padding-block-end: 10px;
        font-family: $duda-title-font;
        color: $font-dark-gray;
        text-transform: uppercase;
    }

    &.resetPadding {
        padding-block-start: 0;
        padding-block-end: 5px;
    }

    &.bold {
        font-weight: bold;
    }

    &.column {
        display: flex;
        flex-direction: column;
    }

    &.mobileFieldLabel {
        font-weight: 600;
        color: $grayer-gray;
    }

    :global {
        .helpIcon {
            display: inline-block;
            margin-block-start: 0;
            margin-inline-end: 5px;
            margin-block-end: 0;
            margin-inline-start: 5px;
            height: initial;
            position: relative;
            top: 3px;
            vertical-align: baseline;
        }
    }
}

.titleLabel {
    font-size: 15px;
    font-family: $duda-title-font;
    font-weight: 300;
    margin-block-start: 0;
    margin-inline-end: auto;
    margin-block-end: 0;
    margin-inline-start: auto;
    color: $font-dark-gray;
    text-align: center;
    padding-block-start: 20px;
    padding-block-end: 0;
}

.uppercase {
    text-transform: uppercase;
}

.main.hideOnEmpty:empty {
    display: none;
}

.error {
    color: $red-error;
}

.inactive {
    color: $font-light-gray;
}