@import "/UI/Core/Styles/Theme.scss";

MapPackageCard {
    @include menu-surface-alt();
    width: 340px;
    height: 260px;
    padding: 0;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    border-color: rgba( 255, 255, 255, 0.18 );
    transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, opacity 0.16s ease;
    cursor: pointer;

    &.is-preview {
        width: 340px;
        height: 260px;
    }

    &.is-empty {
        opacity: 0.7;
    }

    &:hover:not(.is-empty) {
        transform: translateY( -1px );
        border-color: rgba( 255, 255, 255, 0.28 );
        background-color: rgba( 255, 255, 255, 0.06 );
    }

    &:active:not(.is-empty) {
        transform: scale( 0.985 );
    }

    .map-package-card-image {
        width: 100%;
        height: 200px;
        background-color: rgba( 255, 255, 255, 0.04 );
        background-size: cover;
        background-position: center;
        border-bottom: 1px solid rgba( 255, 255, 255, 0.16 );
    }

    &.is-preview .map-package-card-image {
        height: 200px;
    }

    .map-package-card-body {
        width: 100%;
        height: 58px;
        padding: 10px 12px;
        flex-direction: column;
        gap: 2px;
        overflow: hidden;
        position: relative;
    }

    &.is-preview .map-package-card-body {
        height: 60px;
    }

    .map-package-card-title-row {
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .map-package-card-title {
        color: rgba( 255, 255, 255, 0.94 );
        text-shadow: none;
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.9px;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-grow: 1;
        min-width: 0;
    }

    .ident-row {
        position: absolute;
        right: 12px;
        bottom: 8px;
        width: auto;
        justify-content: flex-end;
        padding: 0px;
    }

    .map-package-card-ident {
        @include menu-copy( $size: 10px, $color: rgba( 255, 255, 255, 0.76 ), $tracking: 0.6px );
        border-radius: 999px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        background-color: rgba( 0, 0, 0, 0.52 );
        padding: 2px 8px;
        text-transform: uppercase;
        flex-shrink: 0;
        max-width: 150px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-package-card-org {
        @include menu-copy( $size: 12px, $color: rgba( 255, 255, 255, 0.74 ), $tracking: 0.4px );
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}