.container {
background-color: var(--gray-1);
min-width: 32rem;
}
.header {
font-size: var(--text-small);
}
.tab {
color: var(--gray-5);
}
.tab button:hover,
.overflow-btn:hover {
background-color: var(--gray-2);
}
/* Global .overflow-menu button with .selected class */
.overflow-menu button.selected {
order: unset;
}
.tab button,
.overflow-btn {
border: 0;
background-color: transparent;
padding: var(--size-2) var(--size-4);
border-radius: 20px;
cursor: pointer;
transition: background-color ease-in-out 0.2s;
}
/* Global .action-button */
.action-button {
padding: 7px;
border-radius: 20px;
transition: background-color ease-in-out 0.2s;
background-color: var(--gray-1);
border: 1px solid var(--gray-3);
color: var(--gray-6);
cursor: pointer;
}
/* Hover and active states for .action-button */
.action-button:hover {
background-color: var(--gray-2);
}
.action-button:active,
.action-button.active {
background-color: var(--gray-2);
}
/* .icon inside .action-button */
.action-button .icon {
margin: 0 var(--size-1);
}
/* Disabled state */
.action-button.disabled {
color: var(--gray-4);
}
/* Button with text */
.with-text {
padding-right: var(--size-3);
}
/* Controls container */
.controls {
background-color: white;
padding: var(--size-4);
}
/* Controls footer */
.controls-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
color: var(--gray-5);
margin-top: var(--size-3);
padding: 0 var(--size-2);
font-size: var(--text-small);
}
/* Apply left margin to every element after the first child */
.controls-footer > * + * {
margin-left: var(--size-3);
}
/* .icon inside .controls-footer */
.controls-footer .icon {
margin-right: 0.2em;
opacity: 0.8;
}
/* Links inside .controls-footer */
.controls-footer a {
color: inherit;
text-decoration: none;
}
/* Hover effect for links */
.controls-footer a:hover {
color: var(--text-color);
}
.download-option-content {
margin-left: var(--size-3);
font-size: var(--text-small);
}
.download-option-content > :first-child {
margin-bottom: var(--size-2);
color: var(--gray-6);
font-weight: bold;
}
.download-option-content > :not(:first-child) {
margin-top: var(--size-1);
color: var(--gray-5);
}
.download-option {
display: flex;
padding: var(--size-2);
text-align: left;
background: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
/* The .icon inside .download-option */
.download-option :global(.icon) {
margin-top: var(--icon-adjust);
}
/* When the previous sibling is not hovered */
:not(:hover) + .download-option {
border-top: 1px solid var(--gray-2);
}
/* Hover and focus states */
.download-option:hover,
.download-option:focus {
background-color: var(--gray-1);
border: 1px solid var(--gray-3);
}
/* Direct or nested div inside .download-option */
.download-option div {
display: block;
}