.group {
    display: block;
    margin-bottom: 24px;

    &_last,
    &:last-child {
        margin-bottom: 0;
    }
}

.label {
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--gray700);
}

.reveal {
    color: var(--black);
    transition: color var(--transition);
    cursor: pointer;

    &:hover,
    &:focus {
        color: var(--gray);
    }
}

.reveal + .suffix {
    margin-left: 16px;
}

.addon {
    display: flex;
    height: 48px;
    padding: 14px 3px 14px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    overflow: hidden;

    @media (--m-viewport) {
        padding-right: 6px;
        font-size: 16px;
        line-height: 1.3;
    }
}

.addonCountry {
    min-width: 28px;
    margin-right: 3px;

    @media (--m-viewport) {
        margin-right: 12px;
    }
}

.addonIcon {
    position: relative;
    top: -2px;
    margin-right: 9px;
    color: var(--concrete);
}

.addonCode {
    position: relative;
    padding-left: 12px;

    &::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        width: 1px;
        height: 48px;
        background-color: var(--borders-white);
    }
}
