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

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

/* File card for the Home screen */

.ui.card.file {
    .fileimage {
        position: absolute;
        top: 0.7rem;
        left: 0.7rem;
        width: 4rem;
        height: 3rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: @fileLogo;
    }
    .content {
        margin-left: 4rem;
        min-width: 5rem;
        height: 8rem;
        .header {
            word-wrap: break-word;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .meta {
        height: 4rem;
        padding: 1rem;
        text-align: right;
    }
}

.ui.card.file.github {
    .fileimage {
        background-image: @githubFileLogo;
    }
}

.ui.card.file.board {
    .fileimage {
        background-image: unset;
    }
}

.ui.card.file.positive, .ui.card.file.positive:focus {
    border-color: @green;
}

.ui.card.file.warning {
    border-color: @warningBackgroundColor;
}

.ui.card.file .selected-label {
    border-color: transparent !important;
    cursor: pointer;
    i.icon {
        cursor: pointer;
        font-size: 2rem;
        left: 0;
        top: 1rem;
    }
}

/*
.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 @solidBorderColor;
    text-align: center;
    color: @white;
    font-size: 18pt;
    .content {
        height: 12rem;
    }
    .header {
        color: @white;
        font-size: 14pt !important;
        margin-top: 1rem !important;
    }
}

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

.ui.card.link.newprojectcard {
    background: fade(@primaryColor, 90%) !important;
}
.ui.card.link.scriptmanagercard {
    background: fade(@secondaryColor, 90%) !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;
    }
}

.setExampleCardFullHeight() when (@exampleCardFullHeight) {
    .projectsdialog {
        .ui.card.example {
            .ui.image, .ui.cardimage {
                height: 12rem !important;
            }
            .ui.image ~ .content {
                background: @exampleCardFullHeightBackground;
                position: absolute;
                bottom: 0;
                .header {
                    color: @exampleCardFullHeightColor;
                }
            }
        }
    }
    /* Mobile only */
    @media only screen and (max-width: @largestMobileScreen) {
        .projectsdialog {
            .ui.card.example {
                .ui.image, .ui.cardimage {
                    height: 8.4rem !important;
                }
            }
        }
    }
}
.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, .ui.cards>.card {
        .content .description {
            display: none;
        }
        .content .header {
            font-size: 80%;
            font-weight: normal;
        }
    }
}