$food-button-color: #1edb50;
$prod-button-color: #e6d83e;

.resources-screen {
    background-image: url('../../images/resources-bg.svg') !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-blend-mode: overlay !important;
    background-size: contain !important;
}

.resources-main-buttons {
    display: flex;
    flex-direction: column;
    .resources-main-buttons-row {
        align-content: center;
        align-items: flex-end;
        display: flex;
        height: 64px;
        justify-content: center;
        flex-direction: row;
    }
}

.clickopolis-indicator-label {
    font-size: 90%;
}

.food-button {
    all: unset;
    align-content: center;
    background: $food-button-color;
    border-bottom: 2px solid darken($food-button-color, 15%);
    border-radius: 4px;
    box-shadow: 0 0 1rem rgba(white, 0.1);
    color: #222;
    cursor: pointer;
    display: flex;
    font-size: 1.25rem;
    justify-content: center;
    margin: .5rem;
    margin-top: .75rem;
    padding: .75rem;
    vertical-align: middle;
    width: 14rem;

    span {
        display: inline-block;
        margin-left: .5rem;
    }

    &:hover {
        background: lighten($food-button-color, 5%);
        transition: 200ms all;
    }

    &:active {
        border-bottom: 0 solid transparent;
        background: lighten($food-button-color, 10%);
        transform: translateY(4px);
        transition: 200ms all;
    }
}

.plus-sign {
    font-weight: bold;
    color: white;
    -webkit-text-stroke: 1px solid #222;
    pointer-events: none;
    transition: 300ms ease-in;
    transform: translateZ(0);
}

.clickopolis-button-value {
    font-weight: bold;
}

.prod-button {
    @extend .food-button;
    background: $prod-button-color;
    border-bottom: 2px solid darken($prod-button-color, 15%);

    

    &:hover {
        background: lighten($prod-button-color, 5%);
        transition: 200ms all;
    }
}
