/*
 *   This file is a part of the SteamWar software.
 *
 *   Copyright (C) 2023 SteamWar.de-Serverteam
 *
 *   This program is free software: you can redistribute it and/or modify
 *   it under the terms of the GNU Affero General Public License as published by
 *   the Free Software Foundation, either version 3 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *   GNU Affero General Public License for more details.
 *
 *   You should have received a copy of the GNU Affero General Public License
 *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

.btn {
    @apply bg-yellow-400 font-bold py-2 px-4 rounded cursor-pointer select-none mx-0.5 md:mx-2 text-black flex flex-row;
    @apply hover:bg-yellow-300 hover:text-black hover:shadow-2xl hover:scale-105;
    transition: all 0.5s cubic-bezier(.2, 3, .67, .6),
    background-color .1s ease-in-out,
    outline-width .1s ease-in-out,
    outline-color .1s ease-in-out;
    @apply active:scale-90;

    .btn__text {
        @apply inline-block;
    }
}

.btn-dropdown {
    @apply relative mx-0.5 md:mx-2;

    > :nth-child(1) {
        @apply !mx-0;
    }

    > :nth-child(2) {
        @apply hidden absolute top-full left-1/2 -translate-x-1/2 bg-gray-800 list-none text-white rounded py-2 flex-col text-sm z-20;
    }

    &:hover, &:focus-within {
        > :nth-child(2) {
            @apply flex;
        }
    }
}

.btn-ghost {
    @apply px-6 text-xl;
    @apply bg-transparent border-2 border-yellow-400 shadow-2xl shadow-yellow-400 backdrop-blur text-neutral-800 font-bold bg-gradient-to-br from-yellow-400 to-yellow-200 rounded-xl;
    @apply hover:border-yellow-300 hover:shadow-yellow-800 hover:scale-110;
}

.btn-gray {
    @apply bg-gray-800 text-white;
}

.btn-neutral {
    @apply bg-neutral-800 text-white;
}

.btn-text {
    @apply bg-transparent underline text-white;
    @apply hover:bg-transparent hover:outline hover:outline-1;

    .btn__text {
        @apply underline;
    }
}
