/* -----------------------------------------
   CARDS - /src/styles/components/cards.scss
----------------------------------------- */
/*
    Cards and Panels function the same way and utilize all the same classes
*/
.card{
    margin-bottom: $spacer * 1.5;

    .card-header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        
        .card-title{
            font-size: 1.25rem;
            font-weight: normal;
            padding: 0;

            > [class*="ca-gov-icon-"]{
                vertical-align: middle;
                margin-right: .5rem;
            }
        }

        .options{
            .btn{
                border-color: var(--bs-border-color-translucent, $border-color);
                background-color: var(--bs-gray-75, $gray-75);

                &:hover,
                &:focus{
                    background-color: var(--bs-gray-100, $gray-100);
                }
            }
        }

        // centered justified header.
        &.center{
            justify-content: center;
            .card-title{
                margin-left: auto;
                margin-right: auto;
            }
        }

        // right justified header.
        &.right{
            justify-content: end;
            .card-title{
                margin-right: $font-size-base;
            }
        }
    }

    // None
    &.card-none{
        border: none;
        .card-header{
            border: none;
        }
    }

    // Standout
    &.card-standout{
        &.highlight{
            // Add triangle to center of body
            .card-body:before{
                content: "";
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-top: 12px solid var(--bs-standout, $standout);
                margin-top: calc(  var(--bs-card-spacer-y) * -1);
                left: 50%;
            }
        }

        .card-header{
            background-color: var(--bs-standout, $standout);
            color: var(--bs-white, $white);

            .options{
                .btn{
                    background-color: var(--bs-standout-dark, $standout);
    
                    &:hover,
                    &:focus{
                        background-color: var(--bs-standout-darker, $standout);
                    }
                }
            }
        }
    }

    // Overstated
    &.card-overstated{
        
        .card-header{
            background-color: var(--bs-main, $main);
            color: var(--bs-white, $white);

            .options{
                .btn{
                    color: var(--bs-white, $white);
                    background-color: var(--bs-main-dark, $main);

                    &:hover,
                    &:focus{
                        background-color: var(--bs-main-darker, $main);
                    }
                }
            }
        }
    }

    // Understated
    &.card-understated{
        .card-header{
            background-color: var(--bs-alt, $alt);
            color: inherit;

            .options{
                .btn{
                    color: inherit;
                    background-color: var(--bs-alt-dark, $alt);

                    &:hover,
                    &:focus{
                        background-color: var(--bs-alt-darker, $alt);
                    }
                }
            }
        }
    }
}