:root {
    /**
        Colors
    */
    --black: #000000;
    --white: #ffffff;
    --disabled-color: rgb(236, 240, 241);
    --text-color-highlight: #3d85c6;
    --game-icon-color: #38e691;

    /**
        Typography
    */
    --font-base-size: 1rem; /* = 16px */
    --text-color: var(--black);
    --font-family-default: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-title: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /**
        Effects
    */
    --border-radius-tile: 1rem;
    --border-radius-input: 0.5rem;
}

.component-icon {
    --icon-size: 1rem;
    --stroke-width: 1px;
    --icon-color: var(--black);
    --active-icon-color: var(--text-color-highlight);
    --active-bg-visibility: hidden;
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--icon-color);
    flex-shrink: 0;
    flex-grow: 0;
}

.component-icon path {
    stroke-width: var(--stroke-width);
}

.component-icon.is-clickable {
    cursor: pointer;
}

.component-icon.is-clickable:hover,
.component-icon.is-active {
    --active-bg-visibility: visible;
}

.component-icon.is-disabled,
.component-icon.is-clickable.is-disabled,
.component-icon.is-clickable.is-active {
    cursor: default;
    --icon-color: var(--disabled-color);
}

.component-icon.size-s {
    --stroke-width: 3px;
}

.component-icon.size-m {
    --icon-size: 1.5rem;
    --stroke-width: 2.5px;
}

.component-icon.size-l {
    --icon-size: 2rem;
    --stroke-width: 2px;
}

.component-icon.size-xl {
    --icon-size: 3rem;
    --stroke-width: 1.5px;
}

.component-icon-link {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;

    display: flex;
    gap: 0.375rem;
    text-decoration: none;
    align-items: center;
    align-content: center;
    cursor: pointer;
}

.component-icon-link:hover .link-label {
    text-decoration: underline;
}

.component-icon-link:hover .component-icon {
    --active-bg-visibility: visible;
}

.component-rating {
    display: flex;
    gap: 0.25rem;
}

.component-rating .component-icon {
    --active-icon-color: #e4e638;
}

.component-button {
    --background-color: var(--text-color-highlight);
    --hover-background-color: #246CAD;
    --text-color: var(--white);

    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 1rem;
    border-radius: var(--border-radius-input);
    text-decoration: none;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    cursor: pointer;
}

.component-button:hover {
    --background-color: var(--hover-background-color);
}

.component-button.is-disabled {
    cursor: default;
    --background-color: var(--disabled-color);
}

.component-button .component-icon {
    --icon-color: var(--text-color);
}

.component-button:hover .component-icon {
    --active-bg-visibility: visible;
}

.component-form {
    display: grid;
    grid-row-gap: 1rem;
    margin-inline: auto;
}

.component-form .component-form-row {
    display: grid;
    grid-row-gap: 0.25rem;
}

.component-form .component-form-row .component-button {
    justify-self: start;
}

.component-form-message.error {
    color: red;
}

.component-form-label {
    color: var(--text-color);
}

.component-form-input {
    border-radius: var(--border-radius-input);
    font-size: 1rem;
    padding: 0.5rem;
    width: 100%;
    color: var(--text-color);
}

.component-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.component-form-checkbox .checkbox {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;

    --checked-color: var(--text-color-highlight);

    width: 1.75rem;
    border: 0.125rem solid currentColor;
    aspect-ratio: 1;
    border-radius: var(--border-radius-input);
    display: grid;
    place-content: center;
}

.component-form-checkbox.is-disabled {
    cursor: not-allowed;
}

.component-form-checkbox .checkbox-label {
    color: var(--text-color);
}

.component-form-checkbox .checkbox::before {
    content: "";
    width: 1.25em;
    aspect-ratio: 1;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 0.75em 0.75em var(--checked-color);
    border-radius: 0.375rem;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.component-form-checkbox .checkbox:checked::before {
    transform: scale(1);
}

.component-form-checkbox.is-disabled .checkbox {
    color: var(--disabled-color);
    --checked-color: var(--disabled-color);
}

.component-form-checkbox.is-disabled .checkbox-label {
    color: var(--disabled-color);
}

.component-faq-container {
    margin-top: 1.5rem;
}

.component-faq-container .faq-title {
    font-weight: bold;
}

.component-faq-container .faq-list {
    margin-top: 1rem;
    display: grid;
    grid-row-gap: 0.75rem;
}

.component-faq-container .faq-list .faq-entry .entry-title {
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.component-faq-container .faq-list .faq-entry.open .entry-title .entry-toggle {
    transform: rotate(90deg);
}

.component-faq-container .faq-list .faq-entry .entry-content {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.component-faq-container .faq-list .faq-entry.open .entry-content {
    display: block;
}

.component-formatted-text * {
    margin: 0;
    font-size: 0.875rem;
}

.component-formatted-text * + * {
    margin-top: 0.75rem;
}

.component-expandable-text {
    --max-lines: 2;
}

.component-expandable-text .component-formatted-text {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--max-lines);
    overflow: hidden;
}

.component-expandable-text.is-expanded .component-formatted-text {
    display: block;
}

.component-expandable-text .component-toggle-text {
    color: var(--text-color);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.component-expandable-text .component-toggle-text:hover {
    text-decoration: none;
}

.component-opinion {
    border: 2px solid #ead1dc;
    border-radius: var(--border-radius-tile);
    display: grid;
    grid-row-gap: 1rem;
}

.component-opinion .game-snippet {
    border: 0;
}

.component-opinion .game-snippet .stats-wrapper .stat-row,
.component-opinion .game-snippet .stats-wrapper .stat-row.single-stat {
    display: none;
}

.component-opinion .game-snippet .stats-wrapper .stat-row.avg-rating {
    display: block;
}

.component-opinion .game-snippet .stats-wrapper .stat-row.avg-rating span {
    display: none;
}

.component-opinion .opinion-container {
    padding: 0.5rem;
    padding-top: 0;
}