.linkInput__wrap {
    display: flex;
    align-items: stretch;
}

.linkInput__optionWrapper {
    flex-grow: 1;
    flex-shrink: 1;
    /* see https://css-tricks.com/flexbox-truncated-text/ */
    min-width: 0;

    &,
    > div {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }
}

.linkInput__optionsPanelDouble {
    display: flex;
    flex-basis: 100%;
}

.linkInput__optionsPanel {
    padding-top: var(--spacing-Full);
    display: flex;
    flex-wrap: wrap;
}

.linkInput__optionsPanelItem {
    flex-basis: 50%;
    padding: var(--spacing-Half);
}

.linkInput__optionsPanelLabel {
    margin-bottom: var(--spacing-Quarter);
}

.linkInput__innerButton {
    height: auto;
    background: var(--colors-ContrastNeutral);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.linkInput__loaderWrapper {
    padding: 4px 16px;
    height: var(--spacing-GoldenUnit);
    line-height: var(--spacing-GoldenUnit);
    background: var(--colors-ContrastNeutral);
}

.linkInput__loader {
    margin: var(--spacing-Quarter);
}

.linkInput__item {
    padding: var(--spacing-Half);
    box-sizing: content-box;
    height: calc(var(--spacing-GoldenUnit) * 1.5);
    line-height: 20px;
}

.linkInput__link {
    color: var(--colors-ContrastBright);
    display: block;
    font-size: 12px;
}

.linkInput__image {
    height: calc(var(--spacing-GoldenUnit) * 1.5);
    width: auto;
    float: right;
}

.linkInput__link--active {
    color: #fff;
}
