---
const { link, type, id, isDaftar, isBlank, filled, ...rest } = Astro.props;
const linknya = isDaftar ? "https://daftar.al-wafi.sch.id/" : link;
const targetAttr = isBlank ? '_blank' : '';
---

<a href={linknya} class:list={["btn", type, { fill: filled }]} id={id} target={targetAttr} aria-label="button" {...rest}>
    <slot />
</a>

<style type="text/css">
    :root {
        --animation-mengkilap: mengkilap 0.3s 0s linear;
    }

    @keyframes mengkilap {
        from {
            opacity: 0;
            left: 0%;
        }

        50% {
            opacity: 1;
        }

        to {
            opacity: 0;
            left: 100%;
        }
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-02);
        padding: var(--space-02) var(--space-04);
        border-radius: var(--radius-01);
        min-width: fit-content;
        max-width: fit-content;
        max-height: fit-content;
        text-decoration: none;
        text-transform: capitalize;
        transition: var(--transition-01);
        cursor: pointer;
        overflow: hidden;
        user-select: none;

        &:hover {
            color: var(--color-accent-02);
        }

        &.fill {
            max-width: 100%;
        }

        &.primary {
            color: var(--color-text-light) !important;
            background-color: var(--color-accent-02) !important;
            /* border: 2px solid var(--color-surface-03); */
            -webkit-transition: var(--transition-01);
            -moz-transition: var(--transition-01);
            transition: var(--transition-01);
            box-shadow: 0px 0px 0px 0px var(--color-surface-03);

            &:hover {
                filter: var(--filter-bright-01);
                scale: 1.050;

                &::before {
                    -webkit-animation: var(--animation-mengkilap);
                    -moz-animation: var(--animation-mengkilap);
                    animation: var(--animation-mengkilap);
                }

                &:active {
                    filter: var(--filter-bright-01);
                    scale: 1;
                }
            }

            &::before {
                content: "";
                display: block;
                width: 0px;
                height: 86%;
                position: absolute;
                top: 7%;
                left: 0%;
                opacity: 0;
                background: #ffffff30;
                box-shadow: 0 0 0px 30px #ffffff30;
                -webkit-transform: skewX(-20deg);
                -moz-transform: skewX(-20deg);
                -ms-transform: skewX(-20deg);
                -o-transform: skewX(-20deg);
                transform: skewX(-20deg);
            }
        }

        &.kedua {
            color: var(--color-text-light) !important;
            background-color: var(--color-surface-03) !important;
            /* border: 2px solid var(--color-surface-03); */
            box-shadow: 0px 0px 0px 0px var(--color-surface-03);

            &:hover {
                filter: var(--filter-bright-01);
                scale: 1.050;

                &::before {
                    -webkit-animation: var(--animation-mengkilap);
                    -moz-animation: var(--animation-mengkilap);
                    animation: var(--animation-mengkilap);
                }

                &:active {
                    filter: var(--filter-bright-01);
                    scale: 1;
                }
            }

            &::before {
                content: "";
                display: block;
                width: 0px;
                height: 86%;
                position: absolute;
                top: 7%;
                left: 0%;
                opacity: 0;
                background: #ffffff30;
                box-shadow: 0 0 0px 30px #ffffff30;
                -webkit-transform: skewX(-20deg);
                -moz-transform: skewX(-20deg);
                -ms-transform: skewX(-20deg);
                -o-transform: skewX(-20deg);
                transform: skewX(-20deg);
            }
        }

        &.ketiga {
            color: var(--color-text-dark) !important;
            background-color: var(--color-text-dark-dimest) !important;
            /* border: 2px solid var(--color-surface-03); */
            box-shadow: 0px 0px 0px 0px var(--color-surface-03);

            &:hover {
                filter: var(--filter-bright-01);
                scale: 1.050;

                &:active {
                    filter: var(--filter-dark-01);
                    scale: 1;
                }
            }
        }

        &.keempat {
            color: var(--color-text-dark) !important;
            background-color: var(--color-accent-01) !important;
            /* border: 2px solid var(--color-surface-03); */
            box-shadow: 0px 0px 0px 0px var(--color-surface-03);

            &:hover {
                filter: var(--filter-bright-01);
                scale: 1.050;

                &:active {
                    filter: var(--filter-dark-01);
                    scale: 1;
                }
            }
        }

        &.icon {
            padding: var(--space-02);
            width: calc(var(--fontsize-body) * 2);
            height: auto;
            aspect-ratio: 1 / 1;


            &.primary {
                color: var(--color-text-light) !important;
                background-color: var(--color-accent-02) !important;
                /* border: 2px solid var(--color-surface-03); */
                -webkit-transition: var(--transition-01);
                -moz-transition: var(--transition-01);
                transition: var(--transition-01);
                box-shadow: 0px 0px 0px 0px var(--color-surface-03);

                &:hover {
                    filter: var(--filter-bright-01);
                    scale: 1.050;

                    &::before {
                        -webkit-animation: var(--animation-mengkilap);
                        -moz-animation: var(--animation-mengkilap);
                        animation: var(--animation-mengkilap);
                    }

                    &:active {
                        scale: 1;
                    }
                }

                &::before {
                    content: "";
                    display: block;
                    width: 0px;
                    height: 86%;
                    position: absolute;
                    top: 7%;
                    left: 0%;
                    opacity: 0;
                    background: #ffffff30;
                    box-shadow: 0 0 0px 30px #ffffff30;
                    -webkit-transform: skewX(-20deg);
                    -moz-transform: skewX(-20deg);
                    -ms-transform: skewX(-20deg);
                    -o-transform: skewX(-20deg);
                    transform: skewX(-20deg);
                }
            }

            &.kedua {
                color: var(--color-text-light) !important;
                background-color: var(--color-surface-03) !important;
                /* border: 2px solid var(--color-surface-03); */
                box-shadow: 0px 0px 0px 0px var(--color-surface-03);

                &:hover {
                    filter: var(--filter-bright-01);
                    scale: 1.050;

                    &::before {
                        -webkit-animation: var(--animation-mengkilap);
                        -moz-animation: var(--animation-mengkilap);
                        animation: var(--animation-mengkilap);
                    }

                    &:active {
                        scale: 1;
                    }
                }

                &::before {
                    content: "";
                    display: block;
                    width: 0px;
                    height: 86%;
                    position: absolute;
                    top: 7%;
                    left: 0%;
                    opacity: 0;
                    background: #ffffff30;
                    box-shadow: 0 0 0px 30px #ffffff30;
                    -webkit-transform: skewX(-20deg);
                    -moz-transform: skewX(-20deg);
                    -ms-transform: skewX(-20deg);
                    -o-transform: skewX(-20deg);
                    transform: skewX(-20deg);
                }
            }

            &.ketiga {
                color: var(--color-text-dark) !important;
                background-color: var(--color-text-dark-dimest) !important;
                /* border: 2px solid var(--color-surface-03); */
                box-shadow: 0px 0px 0px 0px var(--color-surface-03);

                &:hover {
                    filter: var(--filter-dark-01);
                    scale: 1.050;

                    &:active {
                        scale: 1;
                    }
                }
            }
        }
    }
</style>