*{
    --theme-bg: #03001C;
    --theme-fg: white;
    font-family: "M PLUS 2", sans-serif;
}

:root{
    interpolate-size: allow-keywords;
    background-color: var(--theme-bg);
    color: var(--theme-fg);
}

.search-bar{
    position: relative;
    border: 1px solid;
    padding: 0;
    border-radius: 26px;
    height: 52px;
    min-width: 200px;
    width: 90vw;
    max-width: 800px;
    box-sizing: border-box;
    margin: auto;
    display: flex;
    background-color: var(--theme-bg);
    transition: border-color .5s ease-in-out;

    &:has(*:focus){
        border-color: transparent;
    }


    > input{
        position: relative;
        z-index: 2;
        margin: 0;
        color: inherit;
        outline: none;
        border: none;
        font-weight: 200;
        width: 100%;
        font-size: 20px;
        padding: 0 15px;
        display: block;
        background: transparent;
    }
    > button{
        position: relative;
        z-index: 3;
        color: inherit;
        right: 0;
        top: 0;
        bottom: 0;

        position: absolute;
        aspect-ratio: 1;
        background-color: transparent;
        border: none;
        padding: 0;
        :hover{
            background-color: rgba(0,0,0,0.2);
        }
        > svg{
            fill: var(--theme-fg);
        }
    }
}

@property --angle {
  syntax: '<angle>';
  initial-value: -225deg;
  inherits: false;
}


@keyframes search-bar-gradient {
    0%{
        --angle: -225deg
    }50%{
        --angle: 45deg
    }100%{
        --angle: 75deg
    }
}
@keyframes input-cursor-blink {
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}

.search-bar::before{
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0px;
    border-radius: 36px;
    transition: inset .5s ease-in-out;
    background-image: linear-gradient(var(--angle), #feac5e, #c779d0, #4bc0c8);
    content: "";

    animation: search-bar-gradient 10s ease-in-out infinite;
}
.search-bar:has(:focus)::before{
    inset: -3px;
}