.action_button_container {
    display: flex;
    justify-content: flex-end;

    & .add_button:not(:disabled) {
        background-color: transparent;
        border: none;
        color: #fff;
        transition: all 0.1s ease;
        padding: 0.5em;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(to right, var(--main-color), #fff, var(--main-color));
        text-shadow: 1px 2px 2px #cccccc;
        cursor: pointer;

        &:active {
            text-shadow: none;
        }

        & i {
            font-size: 1.5em;
        }
    }

    & .add_button:disabled {
        opacity: 0.3;
        color: rgb(233, 233, 233);
        text-shadow: none;
        cursor: not-allowed;
        background-color: transparent;
        border: none;
        padding: 0.5em;
    }
}