.search-input {
background: transparent;
border: none;
color: white;
width: 100%;
font-size: var(--text-size);
height: 28px;
&::placeholder {
color: var(--gray500);
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
display: inline-block;
width: 8px;
height: 8px;
margin-left: 10px;
background:
linear-gradient(
45deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 43%,
#fff 45%,
#fff 55%,
rgba(0, 0, 0, 0) 57%,
rgba(0, 0, 0, 0) 100%
),
linear-gradient(
135deg,
transparent 0%,
transparent 43%,
#fff 45%,
#fff 55%,
transparent 57%,
transparent 100%
);
cursor: pointer;
}
}
.flags-table {
width: 100%;
border-collapse: collapse;
}
.flag-row {
&.not-visible {
visibility: hidden;
}
}
.flags-table-empty {
position: absolute;
top: 0;
left: 0;
right: 0;
color: var(--gray500);
padding: 12px 12px;
line-height: 1.5;
}
.flag-name-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
padding: 6px 6px 6px 0;
display: flex;
align-items: center;
gap: 8px;
.flag-icon {
height: 15px;
width: 15px;
color: var(--dimmed-color);
}
}
.flag-link {
color: var(--text-color);
text-decoration: none;
&:hover,
&:focus-visible {
text-decoration: underline;
}
}
.flag-reset-cell {
width: 32px;
padding: 6px 0;
text-align: right;
}
.reset {
color: var(--gray500);
text-decoration: none;
&:hover,
&:focus-visible {
text-decoration: underline;
}
}
.flag-switch-cell {
padding: 6px 0 6px 6px;
width: 0;
}