/*******************************
    User Variable Overrides
*******************************/

.ui.card .ui.button.massive {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/*
.ui.card.file:not(.positive) {
    .selected-label {
        display: none;
    }
    &:hover {
        .selected-label {
            display: block;
        }
    }
}*/

/*-------------------
        Link
--------------------*/

.ui.cards a.card:focus,
.ui.link.cards .card:focus,
a.ui.card:focus,
.ui.link.card:focus {
    cursor: pointer;
    z-index: @linkHoverZIndex;
    background: @linkHoverBackground;
    border: @linkHoverBorder;
    box-shadow: @linkHoverBoxShadow;
    transform: @linkHoverTransform;
    outline: none;
}

/* New project card */

.ui.card.link.buttoncard {
    border: @borderWidth solid var(--pxt-neutral-foreground1);
    text-align: center;
    color: var(--pxt-neutral-foreground1);
    font-size: 18pt;

    .content {
        height: 12rem;
    }

    .header {
        color: var(--pxt-neutral-foreground1);
        font-size: 14pt !important;
        margin-top: 1rem !important;
    }
}

.ui.card.buttoncard:hover {
    border: @linkHoverBorder;
}

.gallerysegment .ui.card.link.newprojectcard {
    background-color: var(--pxt-primary-background) !important;
    color: var(--pxt-primary-foreground) !important;

    .header {
        color: var(--pxt-primary-foreground) !important;
    }
}

.gallerysegment .ui.card.link.cloudprojectscard {
    background-color: var(--pxt-secondary-background) !important;
    color: var(--pxt-secondary-foreground) !important;

    .header {
        white-space: normal;
        color: var(--pxt-secondary-foreground) !important;
    }
}

@media only screen and (min-height: tallEditorBreakpoint),
(min-width: @computerBreakpoint) {
    .ui.card.link.cloudprojectscard .icon {
        margin-left: -1rem
    }
}

.ui.card.link.scriptmanagercard {
    background-color: var(--pxt-secondary-background) !important;
    color: var(--pxt-secondary-foreground) !important;

    &:hover,
    &:focus {
        background-color: var(--pxt-secondary-background-hover) !important;
        color: var(--pxt-secondary-foreground) !important;
    }

    .header {
        color: var(--pxt-secondary-foreground) !important;
    }
}


/* Example card */

.ui.card.example {
    .ui.label {
        z-index: 2;
        /* Show the label above the image */
    }

    .content {
        height: 12rem;
        z-index: 1;
        /* Show the text above the image */
        padding-bottom: 0;
        width: 100%;

        .header {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    .ui.image {
        height: 9rem;
    }

    .ui.image~.content {
        height: 3rem;
    }

    .ui.image~.content.tall {
        height: 4rem;
    }
}

.setExampleCardFullHeight() when (@exampleCardFullHeight) {
    .projectsdialog {
        .ui.card.example {
            height: 12rem;

            .ui.image,
            .ui.imagewrapper,
            .ui.cardimage {
                height: 100% !important;
            }

            .ui.image~.content {
                background: @exampleCardFullHeightBackground;
                position: absolute;
                bottom: 0;

                .header {
                    color: @exampleCardFullHeightColor;
                }
            }
        }
    }

    /* Mobile only */
    @media only screen and (max-width: @largestMobileScreen) {
        .projectsdialog {

            // tutorial cards
            .ui.card.example {
                height: 9rem;

                .ui.image,
                .ui.cardimage {
                    height: 8.4rem !important;
                }
            }

            // project cards
            .ui.card.link {
                height: 9rem;

                // new project card +
                i.huge.icon {
                    font-size: 2.5em;
                }
            }

            .ui.card.link.blocksprj .ui.fileimage {
                margin-left: -4px;
            }
        }
    }
}

.setExampleCardFullHeight();


/* Project code cards */
.ui.card .ui.imagewrapper {
    overflow: hidden;
    border-top-left-radius: @borderRadius;
    border-top-right-radius: @borderRadius;
}

.ui.cardimage {
    background-color: @grey;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 9rem;
}

/* Icons as images in cards */
.ui.card>.imageicon {
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
}

/* Mobile only */

@media only screen and (max-width: @largestMobileScreen) {
    .ui.card.file {
        .fileimage {
            top: 2rem;
            left: 1rem;
            width: 2rem;
            height: 1.5rem;
        }
    }

    .ui.card,
    .ui.cards>.card {
        .content>.description {
            /* Overriding some default semantic ui styling */
            margin: 0.5rem 0 0 0 !important;
            padding: 0 !important;
        }

        .content .header {
            font-size: 80%;
            font-weight: normal;
            white-space: nowrap;
        }
    }
}