$a-to-z-background:#F6F7FA !default;

.atoz{
    background:$a-to-z-background;
    padding:20px 0 26px;
    width:100%;
    text-transform:uppercase;
    margin-top:50px;

    @media (max-width: 1300px){
        padding: 10px 0 16px;
    }

    .atoz__header{
        display:inline-block;
        margin:0;
        font-size:21px;
        font-weight:700;
        line-height:1em;
        padding:10px 0;

        @media (max-width: 641px){
            font-size:19px;
        }
    }

    ul{
        @include flexbox();
        @include justify-content(flex-star);
        @include flex-wrap(wrap);
        float:none;
        margin:10px 0 0;
        padding:0;

        li{
            float:left;
            list-style: none;
            font-size:21px;
            font-weight:600;
            line-height:1em;
            text-align:center;
            padding:0;
            margin:0 4px 4px 0;
            @include flex(auto);
            border: 1px solid $a-to-z-background;
            background: white;

            @media (max-width: 1100px){
                min-width:50px;
            }

            @media (max-width: 641px){
                font-size:16px;
            }

            &:last-of-type a{
                width:100%;
            }

            a{
                text-decoration: none;
                border: 0;
                width: 100%;
                display: inline-block;
                background: $blue;
                padding:10px 0;
                font-weight:bold;
                color: white;
                border: 1px solid $blue;
                @media (max-width: 1100px){
                    padding:15px 0;
                }

                &:hover{
                    background: white;
                    color:$blue;
                    border: 1px solid $blue;
                }
            }

            &.active{
                a{
                    background:$base-link-color;
                    color:white;
                }
            }

            &.inactive{
                color:$light-grey;
                display:inline-block;
                border:1px solid white;
                background: $light-black;
                padding:10px 0;
                width:auto;
                @media (max-width: 1100px){
                    padding:15px 0;
                    min-width:50px;
                }
            }
        }
    }
}

//list atoz
.list-atoz{
    margin:0 0 30px;

    li{
        margin-bottom:10px;
        padding-left:10px;

        h2{
            @include heading-medium();
            margin:20px 0 5px -10px;
        }
        
    }

    li:first-child h2{
        margin-top:0;
    }
}

#atozListResultsTop,
#DeltaPlaceHolderMain {
    .atoz{
        margin:0;
    }
}

//atoz
.list-atoz{
    padding:0;
    float:none;

    li{
        padding:0;

        h2{
            margin:20px 0;
        }
    }
}

//a to z no flex
.no-flexbox .atoz ul li,
.no-flexbox .atoz ul li.inactive{
    width:6.5%;
}