.bttn,
gpc-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    position: relative;
    border: 2px solid transparent;
    background-color: transparent;
    transition: all 80ms ease-in-out;
    padding: 0 1rem;
    min-height: 36px;
    box-shadow: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    user-select: none;
    text-overflow: ellipsis;
    cursor: pointer;
    border-radius: 0.25rem;
    line-height: 1;
    outline-offset: 0;
    text-align: center;

    &::before {
        content: "";
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 80ms ease-in-out;
        border-radius: 0.25rem;
    }

    &:disabled,
    &[disabled] {
        border-color: var(--grey-200) !important;
        background-color: var(--grey-50) !important;
        color: var(--grey-400) !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        opacity: 0.6;

        &::before {
            background: transparent !important;
        }

        &[kind="text"] {
            border-color: transparent !important;
            background-color: transparent !important;
        }

        @media (prefers-color-scheme: dark) {
            border-color: var(--grey-700) !important;
            background-color: transparent !important;
            color: var(--grey-500) !important;

            &::before {
                background: transparent !important;
            }

            &[kind="text"] {
                border-color: transparent !important;
                background-color: transparent !important;
            }
        }
    }

    &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
        transition: outline-offset 80ms ease-in-out;

        &[color="grey"] {
            outline-color: var(--grey-900);
        }

        &[color="primary"],
        &[color="info"] {
            outline-color: var(--primary-500);
        }

        &[color="danger"] {
            outline-color: var(--danger-500);
        }

        &[color="warning"] {
            outline-color: var(--warning-500);
        }

        &[color="success"] {
            outline-color: var(--success-500);
        }

        @media (prefers-color-scheme: dark) {
            &[color="grey"] {
                outline-color: var(--grey-400);
            }

            &[color="primary"],
            &[color="info"] {
                outline-color: var(--primary-400);
            }

            &[color="danger"] {
                outline-color: var(--danger-400);
            }

            &[color="warning"] {
                outline-color: var(--warning-400);
            }

            &[color="success"] {
                outline-color: var(--success-400);
            }
        }
    }

    &:active,
    &.is-active {
        outline-offset: 0px !important;
    }

    &[size="slim"] {
        padding: 0 0.5rem;
        min-height: 28px;
    }

    &[size="large"] {
        padding: 0 1.5rem;
        min-height: 42px;
        min-width: 42px;

        & > svg {
            width: 20px;
            height: 20px;
        }
    }

    &[shape="sharp"] {
        border-radius: 0;

        &::before {
            border-radius: 0;
        }
    }

    &[shape="round"] {
        border-radius: 50%;

        &::before {
            border-radius: 50%;
        }
    }

    &[shape="pill"] {
        border-radius: 18px;

        &::before {
            border-radius: 18px;
        }

        &[size="slim"] {
            border-radius: 14px;

            &::before {
                border-radius: 14px;
            }
        }

        &[size="large"] {
            border-radius: 21px;

            &::before {
                border-radius: 21px;
            }
        }
    }

    &[icon="center"] {
        width: 36px;
        height: 36px;
        padding: 0 !important;
    }

    &[icon="right"] {
        padding: 0 0.5rem 0 1rem;

        & > svg {
            margin-left: 0.5rem;
            order: 2;
        }

        & > span {
            order: 1;
        }
    }

    &[icon="left"] {
        padding: 0 1rem 0 0.5rem;

        & > svg {
            margin-right: 0.5rem;
        }
    }

    & > svg {
        width: 20px;
        height: 20px;
    }

    &[kind="solid"] {
        &[dull] {
            border-color: var(--grey-200);
            background-color: var(--white);
            color: var(--grey-700);
            box-shadow: var(--button-shadow);

            @media (prefers-color-scheme: dark) {
                border-color: var(--grey-400);
                background-color: var(--grey-400);
                color: var(--grey-950);
                box-shadow: none;
            }

            &[color="primary"],
            &[color="info"] {
                &:hover,
                &:focus-visible {
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--primary-500-hsl) / 0.05);
                    border-color: var(--primary-200);

                    @media (prefers-color-scheme: dark) {
                        background-color: var(--primary-400);
                        box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--primary-400-hsl) / 0.1);
                    }
                }
            }

            &[color="danger"] {
                &:hover,
                &:focus-visible {
                    border-color: var(--danger-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--danger-500-hsl) / 0.05);

                    @media (prefers-color-scheme: dark) {
                        background-color: var(--danger-400);
                        box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--danger-400-hsl) / 0.1);
                    }
                }
            }

            &[color="warning"] {
                &:hover,
                &:focus-visible {
                    border-color: var(--warning-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--warning-500-hsl) / 0.05);

                    @media (prefers-color-scheme: dark) {
                        background-color: var(--warning-400);
                        box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--warning-300-hsl) / 0.1);
                    }
                }
            }

            &[color="success"] {
                &:hover,
                &:focus-visible {
                    border-color: var(--success-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--success-500-hsl) / 0.05);

                    @media (prefers-color-scheme: dark) {
                        background-color: var(--success-400);
                        box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--success-400-hsl) / 0.1);
                    }
                }
            }
        }

        &[color="primary"]:not([dull]) {
            border-color: var(--primary-200);
            background-color: var(--white);
            color: var(--primary-700);
            box-shadow: var(--button-shadow);

            &:hover {
                box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--primary-500-hsl) / 0.05);
            }

            @media (prefers-color-scheme: dark) {
                border-color: var(--primary-400);
                background-color: var(--primary-400);
                color: var(--grey-950);
                box-shadow: none;

                &:hover {
                    border-color: var(--primary-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--primary-400-hsl) / 0.1);
                }
                &:focus-visible {
                    border-color: var(--primary-200);
                }
            }
        }

        &[color="danger"]:not([dull]) {
            border-color: var(--danger-200);
            background-color: var(--white);
            color: var(--danger-700);
            box-shadow: var(--button-shadow);

            &:hover {
                box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--danger-500-hsl) / 0.05);
            }

            @media (prefers-color-scheme: dark) {
                border-color: var(--danger-400);
                background-color: var(--danger-400);
                color: var(--grey-950);
                box-shadow: none;

                &:hover {
                    border-color: var(--danger-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--danger-400-hsl) / 0.1);
                }
                &:focus-visible {
                    border-color: var(--danger-200);
                }
            }
        }

        &[color="grey"],
        &[color="white"] {
            border-color: var(--grey-200);
            background-color: var(--white);
            color: var(--grey-700);
            box-shadow: var(--button-shadow);

            &:hover {
                box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--grey-500-hsl) / 0.05);
            }

            @media (prefers-color-scheme: dark) {
                border-color: var(--grey-400);
                background-color: var(--grey-400);
                color: var(--grey-950);
                box-shadow: none;

                &:hover {
                    border-color: var(--grey-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--grey-400-hsl) / 0.1);
                }
                &:focus-visible {
                    border-color: var(--grey-200);
                }
            }
        }

        &[color="warning"]:not([dull]) {
            border-color: var(--warning-200);
            background-color: var(--white);
            color: var(--warning-700);
            box-shadow: var(--button-shadow);

            &:hover {
                box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--warning-500-hsl) / 0.05);
            }

            @media (prefers-color-scheme: dark) {
                border-color: var(--warning-400);
                background-color: var(--warning-400);
                color: var(--grey-950);
                box-shadow: none;

                &:hover {
                    border-color: var(--warning-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--warning-300-hsl) / 0.1);
                }
                &:focus-visible {
                    border-color: var(--warning-200);
                }
            }
        }

        &[color="success"]:not([dull]) {
            border-color: var(--success-200);
            background-color: var(--white);
            color: var(--success-700);
            box-shadow: var(--button-shadow);

            &:hover {
                box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--success-500-hsl) / 0.05);
            }

            @media (prefers-color-scheme: dark) {
                border-color: var(--success-400);
                background-color: var(--success-400);
                color: var(--grey-950);
                box-shadow: none;

                &:hover {
                    border-color: var(--success-200);
                    box-shadow: var(--button-shadow), 0 0 0 8px hsl(var(--success-400-hsl) / 0.1);
                }
                &:focus-visible {
                    border-color: var(--success-200);
                }
            }
        }

        &:active,
        &.is-active {
            box-shadow: none !important;
            transform: translateY(1px);
        }
    }

    &[kind="text"] {
        padding: 0 0.5rem;

        &::before {
            opacity: 0;
        }

        &[dull] {
            color: var(--grey-700);

            &::before {
                background-color: var(--grey-500);
            }

            &[icon="center"] {
                color: var(--grey-400);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--grey-300);

                &::before {
                    background-color: var(--grey-400);
                }

                &[icon="center"] {
                    color: var(--grey-500);
                }
            }

            &[color="primary"],
            &[color="info"] {
                &:hover,
                &:focus-visible {
                    color: var(--primary-700);

                    &::before {
                        background-color: var(--primary-500);
                    }

                    @media (prefers-color-scheme: dark) {
                        color: var(--primary-400);

                        &::before {
                            background-color: var(--primary-400);
                        }
                    }
                }
            }

            &[color="danger"] {
                &:hover,
                &:focus-visible {
                    color: var(--danger-700);

                    &::before {
                        background-color: var(--danger-500);
                    }

                    @media (prefers-color-scheme: dark) {
                        color: var(--danger-400);

                        &::before {
                            background-color: var(--danger-400);
                        }
                    }
                }
            }

            &[color="warning"] {
                &:hover,
                &:focus-visible {
                    color: var(--warning-700);

                    &::before {
                        background-color: var(--warning-500);
                    }

                    @media (prefers-color-scheme: dark) {
                        color: var(--warning-400);

                        &::before {
                            background-color: var(--warning-400);
                        }
                    }
                }
            }

            &[color="success"] {
                &:hover,
                &:focus-visible {
                    color: var(--success-700);

                    &::before {
                        background-color: var(--success-500);
                    }

                    @media (prefers-color-scheme: dark) {
                        color: var(--success-400);

                        &::before {
                            background-color: var(--success-400);
                        }
                    }
                }
            }
        }

        &[color="white"] {
            color: var(--white);

            &::before {
                background-color: var(--white);
            }

            &[icon="center"] {
                color: var(--grey-50);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--white);

                &::before {
                    background-color: var(--grey-400);
                }

                &[icon="center"] {
                    color: var(--white);
                }
            }
        }

        &[color="grey"] {
            color: var(--grey-700);

            &::before {
                background-color: var(--grey-500);
            }

            &[icon="center"] {
                color: var(--grey-400);

                &:hover,
                &:focus-visible,
                &:active,
                &.is-active {
                    color: var(--grey-700);
                }
            }

            @media (prefers-color-scheme: dark) {
                color: var(--grey-300);

                &::before {
                    background-color: var(--grey-400);
                }

                &[icon="center"] {
                    color: var(--grey-500);

                    &:hover,
                    &:focus-visible,
                    &:active,
                    &.is-active {
                        color: var(--grey-300);
                    }
                }
            }
        }

        &[color="primary"]:not([dull]),
        &[color="info"]:not([dull]) {
            color: var(--primary-700);

            &::before {
                background-color: var(--primary-500);
            }

            &[icon="center"] {
                color: var(--primary-400);

                &:hover,
                &:focus-visible,
                &:active,
                &.is-active {
                    color: var(--primary-700);
                }
            }

            @media (prefers-color-scheme: dark) {
                color: var(--primary-400);

                &::before {
                    background-color: var(--primary-400);
                }

                &[icon="center"] {
                    color: var(--primary-500);

                    &:hover,
                    &:focus-visible,
                    &:active,
                    &.is-active {
                        color: var(--primary-400);
                    }
                }
            }
        }

        &[color="danger"]:not([dull]) {
            color: var(--danger-700);

            &::before {
                background-color: var(--danger-500);
            }

            &[icon="center"] {
                color: var(--danger-400);

                &:hover,
                &:focus-visible,
                &:active,
                &.is-active {
                    color: var(--danger-700);
                }
            }

            @media (prefers-color-scheme: dark) {
                color: var(--danger-400);

                &::before {
                    background-color: var(--danger-400);
                }

                &[icon="center"] {
                    color: var(--danger-500);

                    &:hover,
                    &:focus-visible,
                    &:active,
                    &.is-active {
                        color: var(--danger-400);
                    }
                }
            }
        }

        &[color="success"]:not([dull]) {
            color: var(--success-700);

            &::before {
                background-color: var(--success-500);
            }

            &[icon="center"] {
                color: var(--success-400);

                &:hover,
                &:focus-visible,
                &:active,
                &.is-active {
                    color: var(--success-700);
                }
            }

            @media (prefers-color-scheme: dark) {
                color: var(--success-400);

                &::before {
                    background-color: var(--success-400);
                }

                &[icon="center"] {
                    color: var(--success-500);

                    &:hover,
                    &:focus-visible,
                    &:active,
                    &.is-active {
                        color: var(--success-400);
                    }
                }
            }
        }

        &[color="warning"]:not([dull]) {
            color: var(--warning-700);

            &::before {
                background-color: var(--warning-500);
            }

            &[icon="center"] {
                color: var(--warning-400);

                &:hover,
                &:focus-visible,
                &:active,
                &.is-active {
                    color: var(--warning-700);
                }
            }

            @media (prefers-color-scheme: dark) {
                color: var(--warning-400);

                &::before {
                    background-color: var(--warning-400);
                }

                &[icon="center"] {
                    color: var(--warning-500);

                    &:hover,
                    &:focus-visible,
                    &:active,
                    &.is-active {
                        color: var(--warning-400);
                    }
                }
            }
        }

        &:hover,
        &:focus-visible {
            &::before {
                opacity: 0.05;
            }
        }

        &:active,
        &.is-active {
            &::before {
                opacity: 0.1;
            }
        }
    }

    &[kind="dashed"] {
        border-style: dashed;
    }

    &[kind="outline"],
    &[kind="dashed"] {
        &::before {
            opacity: 0;
        }

        &[dull] {
            color: var(--grey-700);
            border-color: var(--grey-200);

            @media (prefers-color-scheme: dark) {
                border-color: var(--grey-600);
                color: var(--grey-300);
            }

            &[color="primary"],
            &[color="info"] {
                &::before {
                    background-color: var(--primary-500);
                }

                &:hover,
                &:focus-visible {
                    color: var(--primary-700);
                    border-color: var(--primary-200);

                    @media (prefers-color-scheme: dark) {
                        color: var(--primary-400);
                    }
                }
            }

            &[color="danger"] {
                &::before {
                    background-color: var(--danger-500);
                }

                &:hover,
                &:focus-visible {
                    color: var(--danger-700);
                    border-color: var(--danger-200);

                    @media (prefers-color-scheme: dark) {
                        color: var(--danger-400);
                    }
                }
            }

            &[color="warning"] {
                &::before {
                    background-color: var(--warning-500);
                }

                &:hover,
                &:focus-visible {
                    color: var(--warning-700);
                    border-color: var(--warning-200);

                    @media (prefers-color-scheme: dark) {
                        color: var(--warning-400);
                    }
                }
            }

            &[color="success"] {
                &::before {
                    background-color: var(--success-500);
                }

                &:hover,
                &:focus-visible {
                    color: var(--success-700);
                    border-color: var(--success-200);

                    @media (prefers-color-scheme: dark) {
                        color: var(--success-400);
                    }
                }
            }
        }

        &[color="white"] {
            color: var(--white);
            border-color: var(--grey-200);

            &::before {
                background-color: var(--white);
            }
        }

        &[color="grey"] {
            color: var(--grey-700);
            border-color: var(--grey-200);

            &::before {
                background-color: var(--grey-500);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--grey-300);

                &::before {
                    background-color: var(--grey-400);
                }
            }
        }

        &[color="primary"]:not([dull]),
        &[color="info"]:not([dull]) {
            color: var(--primary-700);
            border-color: var(--primary-200);

            &::before {
                background-color: var(--primary-500);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--primary-400);

                &::before {
                    background-color: var(--primary-400);
                }
            }
        }

        &[color="danger"]:not([dull]) {
            color: var(--danger-700);
            border-color: var(--danger-200);

            &::before {
                background-color: var(--danger-500);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--danger-400);

                &::before {
                    background-color: var(--danger-400);
                }
            }
        }

        &[color="success"]:not([dull]) {
            color: var(--success-700);
            border-color: var(--success-200);

            &::before {
                background-color: var(--success-500);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--success-400);

                &::before {
                    background-color: var(--success-400);
                }
            }
        }

        &[color="warning"]:not([dull]) {
            color: var(--warning-700);
            border-color: var(--warning-200);

            &::before {
                background-color: var(--warning-500);
            }

            @media (prefers-color-scheme: dark) {
                color: var(--warning-400);

                &::before {
                    background-color: var(--warning-400);
                }
            }
        }

        &:hover,
        &:focus-visible {
            &::before {
                opacity: 0.05;
            }
        }

        &:active,
        &.is-active {
            &::before {
                opacity: 0.1;
            }
        }
    }

    & span {
        display: inline-block;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}