.new-button {
    border: none;
    color: white;
    padding: 10px 20px;

    font-family: "Roboto";
    // font-size: 30px;
    // font-weight: bold;

    cursor: pointer;
    
    border-radius: 10px;

    // flex-direction: column;

    flex-grow: 1;
    // width: 100%;

    gap: 0.2em;

    // align items vertically
    align-items: center;

    .icon {
        // font-size: 40px;
        margin-right: 10px;
    }

    background-color: rgba(0, 0, 0, 0.3);

    &.selected {
        background-color: rgba(39, 145, 25, 0.5);
    }

    small {
        font-size: 20px;
        font-weight: normal;
    }

    strong {
        font-weight: bold;
    }

    &.disabled {
        color: rgba(255, 255, 255, 0.5);
        cursor: not-allowed;
    }

    &.error {
        background-color: rgba(228, 21, 21, 0.3);
    }

    &:not(.disabled) {

        &:hover, &:focus, &.focused {
            background-color: rgba(0, 0, 0, 0.5);
            sound-in: "sounds/menu/button-hover.sound";
        }

        &:active {
            sound-in: "sounds/menu/button-click.sound";
        }

        &.error {
            &:hover, &:focus, &.focused {
                background-color: rgba(228, 21, 21, 0.5);
            }
        }

        &.selected {
            &:hover, &:focus, &.focused {
                background-color: rgba(39, 145, 25, 0.7);
            }
        }
    }

    &.retro {
        font-family: "GrapeSoda";
        background-image: linear-gradient(-90deg, #4f7de0, #1f3a73);
        border: 5px solid white;
        &.success {
            background-image: linear-gradient(-90deg, #73e04f, #3a731f);
        }
        &.danger {
            background-image: linear-gradient(-90deg, #e04f4f, #731f1f);
        }
        &.disabled {
            background-image: linear-gradient(-90deg, #a0a0a0, #505050);
            border-color: #666;
        }
    }
}