@import "fonts.css";
@import "catppuccin.css";

:root {
    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.75rem;

    --pico-color: var(--ctp-macchiato-text);
    --pico-h1-color: var(--ctp-macchiato-text);
    --pico-primary-inverse: var(--ctp-macchiato-base);

    --pico-primary: var(--ctp-macchiato-blue);
    --pico-primary-underline: var(--ctp-macchiato-blue);
    --pico-primary-background: var(--ctp-macchiato-blue);

    --pico-primary-hover: var(--ctp-macchiato-mauve);
    --pico-primary-hover-background: var(--ctp-macchiato-mauve);

    --pico-background-color: var(--ctp-macchiato-crust);
}

.bg-red{
    color: hsl(351deg, 74%, 40%);
    background-color: var(--ctp-macchiato-red) !important;
}


.bg-green{
    color: hsl(105deg, 48%, 40%);
    background-color: var(--ctp-macchiato-green) !important;
}

.red-link{
    color: var(--ctp-macchiato-red);
    text-decoration-color: var(--ctp-macchiato-red);
}

h1 {
    font-family: "Jersey 15";
}

#search-dialog {
    & article {
        max-height: 700px;
    }

    & tr {
        cursor: pointer;

        & :hover {
            background-color: var(--pico-hover-background);
        }
    }
}

.hidden {
    display: none;
}

.center {
    text-align: center;
}

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.m-0 {
    margin: 0;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0px;
}

.movie-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;

    & .movie-tile {

        & div {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 0.25rem;
            border-bottom-right-radius: var(--pico-border-radius);
            border-top-left-radius: var(--pico-border-radius);

            & svg {
                width: 2rem;
            }
        }

        & img {
            border-radius: var(--pico-border-radius);
        }

    }

}

.watched {
    text-align: center;
    cursor: pointer;

    & svg {
        width: 3rem;
        color: var(--pico-primary);
    }
}


.ratingBox {
    text-align: center;

    i {
        background-color: var(--pico-secondary);
        cursor: pointer;
    }

    .rated {
        background-color: var(--pico-primary);
    }

    >i {

        &:hover .icon,
        &:hover~.icon {
            background-color: var(--pico-secondary) !important;
        }
    }

    &:hover>.icon {
        background-color: var(--pico-primary);
    }

}


.listRating {
    i {
        width: 1.25rem;
        height: 1.25rem;
        background-color: var(--pico-secondary);
    }

    .rated {
        background-color: var(--pico-primary);
    }
}


.icon {
    display: inline-block;
    font-size: var(--pico-font-size);
    width: 2rem;
    height: 2rem;

    &.star-full {
        mask: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%231C274C" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M9.15316 5.40838C10.4198 3.13613 11.0531 2 12 2C12.9469 2 13.5802 3.13612 14.8468 5.40837L15.1745 5.99623C15.5345 6.64193 15.7144 6.96479 15.9951 7.17781C16.2757 7.39083 16.6251 7.4699 17.3241 7.62805L17.9605 7.77203C20.4201 8.32856 21.65 8.60682 21.9426 9.54773C22.2352 10.4886 21.3968 11.4691 19.7199 13.4299L19.2861 13.9372C18.8096 14.4944 18.5713 14.773 18.4641 15.1177C18.357 15.4624 18.393 15.8341 18.465 16.5776L18.5306 17.2544C18.7841 19.8706 18.9109 21.1787 18.1449 21.7602C17.3788 22.3417 16.2273 21.8115 13.9243 20.7512L13.3285 20.4768C12.6741 20.1755 12.3469 20.0248 12 20.0248C11.6531 20.0248 11.3259 20.1755 10.6715 20.4768L10.0757 20.7512C7.77268 21.8115 6.62118 22.3417 5.85515 21.7602C5.08912 21.1787 5.21588 19.8706 5.4694 17.2544L5.53498 16.5776C5.60703 15.8341 5.64305 15.4624 5.53586 15.1177C5.42868 14.773 5.19043 14.4944 4.71392 13.9372L4.2801 13.4299C2.60325 11.4691 1.76482 10.4886 2.05742 9.54773C2.35002 8.60682 3.57986 8.32856 6.03954 7.77203L6.67589 7.62805C7.37485 7.4699 7.72433 7.39083 8.00494 7.17781C8.28555 6.96479 8.46553 6.64194 8.82547 5.99623L9.15316 5.40838Z" ></path></g></svg>');
    }
}