@use "../abstracts/mixins.scss" as *;


[data-page="species-list-by-families"],
[data-page="species-list"]{

    .group-sort-view{
        display: flex;
        justify-content: space-between;
   
        flex-wrap: wrap;

        grid-column: span 2;
        width: 100%;
         max-width: 100%;
        border-bottom: 1px solid var(--color-x-light);
        padding-top: calc(var(--spacing)*1);
        padding-bottom: calc(var(--spacing)*0.5);
        margin-bottom: calc(var(--spacing)*1.5);

        position: sticky;
        top: 0;
        background-color: var(--white);
        z-index: 50;
    }

    .page-species-list{
        margin-bottom: 30vh;
    }




}


[data-page="species-list-by-families"]{
  .species-list{
         align-items: center;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--spacing)*1);
        margin-bottom: calc(var(--spacing)*3);
         .taxon{
            width: calc(100%/3 - var(--spacing)*2/3);
        }

    }



 

.family{
    margin-bottom: calc(var(--spacing)*4);
    &:target{
        padding-top: var(--top-target);
    }
    .family__header{
      
            @include title-bg(violet);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: calc(var(--spacing)*1.5);

            .title{
                   font-size: var(--fs-medium);
                font-weight: 700;
            }

            .nbr-species{
                 font-size: var(--fs-normal);
                font-weight: 500;
                font-family: var(--font);
            }
        
        }
    }
}








[data-page="species-list"]{

    .page-species-list{
        grid-column: span 2;
        width: 100%;
        max-width: 100%;
    }


}