@charset "UTF-8";

.p-chara_list{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    @media (width <= 760px)  {
        gap: 0.4rem;
    }
    .list_item{
        border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
        a{
            display: grid;
            grid-template-columns: 2rem max-content;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 0.6rem;
            @media (width <= 760px)  {
                font-size: smaller;
            }
        }
        .pict{
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 50%;
            background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
        }
    }
}

.p-character_filter{
    display: grid;
    gap: 2rem;
    .btn_all{
        padding: 0.6rem 1rem;
        color: var(--color-accent);
        background-color: transparent;
        box-shadow:-4px -4px 8px #fff,4px 4px 8px rgb(0 0 0 / 24%);
        border: none;
        border-radius: 4px;
        margin: 0 1rem;
        cursor: pointer;
        transition: box-shadow 0.2s;
        &:hover{
            box-shadow:-2px -2px 4px #fff,2px 2px 4px rgb(0 0 0 / 24%);
        }
    }
    .filter_btn{
        display: flex;
        gap: 1rem;
        .btn{
            padding: 0.6rem 1rem;
            color: var(--color-accent);
            background-color: transparent;
            box-shadow:-4px -4px 8px #fff,4px 4px 8px rgb(0 0 0 / 24%);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: box-shadow 0.2s;
            &:hover{
                box-shadow:-2px -2px 4px #fff,2px 2px 4px rgb(0 0 0 / 24%);
            }
        }
    }
    .filter_tag{
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 1rem;
        .tag{
            padding: 0.4rem 0.6rem;
            background-color: color-mix(in srgb, var(--color-secondary) 30%, transparent);
            font-size: small;
            color: var(--color-accent);
            border-radius: 8px;
            border: none;
            cursor: pointer;
        }
    }
}