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

MapCard
{
    position: relative;
    min-width: 386px;
    background-color: rgba( black, 0.5 );
    overflow: hidden;
    flex-direction: column;

    .header
    {
        padding-bottom: 8px;
    }

    > .background
    {
        flex-grow: 1;
        background-size: cover;
        background-position: center;
        mask-size: cover;
        flex-direction: column;
        padding: 8px;
        border-radius: 2px;
        border: 1px solid rgba( white, 0.50 );
        aspect-ratio: 1.7777778;
        max-height: 206px;
    }

    > .container
    {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 8px 16px;
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    border-radius: 2px;
    border: 0.8px solid rgba( black, 0.35 );
    cursor: pointer;

    &:hover, &.selected
    {
        background-color: rgba( white, 1 );
        sound-in: ui.button.over;

        label, i
        {
            color: black;
            text-shadow: 1px 1px 2px rgba( black, 0 );
        }
    }

    &:active
    {
        sound-in: ui.button.press;
    }
}