@import '~@angular/material/theming';

@mixin application-grid-theme($theme) {
    $primary: map-get($theme, primary);
    $primary-dark: mat-color($primary, A900);
    $accent: map-get($theme, accent);
    $accent-color: mat-color($accent, 500);

    .app-grid-header {
        display: flex;
        align-items: center;

        .fill-space {
            flex: 1;
        }
    }

    .app-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -1rem;
        padding-bottom: 2rem;

        .sp-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc(82px + 2rem);
            height: calc(82px + 2rem);
        }

        .app-wrap {
            outline: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 150px;

            .morph-card {
                cursor: pointer;
                animation: all .2s;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2rem;
                height: 80px;
                width: 80px;
                margin: 1rem;
                border-radius: .5rem;
                border: 1px solid $accent-color;
                font-weight: 800;
                background-color: $primary-dark;
                transition: background-color .2s ease-in-out;
                background-image: 
                    linear-gradient(transparent 11px, rgba($accent-color,.5) 12px, transparent 12px),
                    linear-gradient(90deg, transparent 11px, rgba($accent-color,.5) 12px, transparent 12px);
                    background-size: 100% 12px, 12px 100%;

                &:hover {
                    background-color: rgba($accent-color,.2);
                }

                &.add {
                    background: $accent-color;

                    &:hover {
                        background-color: rgba($accent-color,.8);
                    }
                }
            }

            .name {
                font-size: .8rem;
                color: #8a868a;
            }
        }
    }
}