@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 );
    }

	&.custom-selected,
	&.custom-selected:hover:not(.is-empty) {
		border-color: rgba( 230, 56, 56, 0.9 );
	}

	&.custom-selected .map-package-card-body {
		background-color: rgba( $traitor-red, 0.20 );
	}

	&.custom-selected:hover:not(.is-empty) .map-package-card-body {
		background-color: rgba( $traitor-red, 0.28 );
	}

    &: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 );
        padding: 8px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .map-package-card-badges {
        flex-wrap: wrap;
        gap: 5px;
        max-width: 100%;
    }

    .map-package-card-badge {
        @include menu-copy( $size: 10px, $color: rgba( 255, 255, 255, 0.92 ), $tracking: 0.8px );
        border-radius: 999px;
        border: 1px solid rgba( 255, 255, 255, 0.24 );
        background-color: rgba( 0, 0, 0, 0.58 );
        padding: 2px 7px;
        text-transform: uppercase;
        max-width: 130px;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-items: center;
        gap: 4px;
    }

    .map-package-card-badge--players {
        max-width: 150px;
    }

    .map-package-card-badge-icon {
        font-family: "Material Icons";
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: lowercase;
        color: rgba( 255, 255, 255, 0.86 );
    }

    .map-package-card-badge-text {
        @include menu-copy( $size: 10px, $color: rgba( 255, 255, 255, 0.92 ), $tracking: 0.8px );
        text-transform: uppercase;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-package-card-badge--tag {
        border-color: rgba( $counter-terror-color, 0.42 );
        background-color: rgba( $counter-terror-color, 0.16 );
    }

	.map-package-card-badge--status {
		border-color: rgba( $traitor-red, 0.78 );
		background-color: rgba( $traitor-red, 0.72 );
		color: white;
	}

    &.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;
		transition: background-color 0.12s ease;
    }

    &.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;
    }
}