/*
    comments / explanations below 👇
*/

#app {
    --radius: 16px;
    --height: max(48px, calc( var(--radius) * 2 ));
}

.tab {
    
    height: var(--height);
    border-radius: var(--radius) var(--radius) 0 0;
        
    /*
        these --height and --radius variables are not explicitly needed
        for the effect, they could be hard-set into the css if you know you always
        want your rounded corners to be the same size. I've used variables here so 
        you can edit them and see the dynamic change of the corners easily!
    */
    
    position: relative; /* relative so we can position the corners */
}

.tab::after,
.tab::before {
    
    /* 
        here's the magic.
        - I set a background color of inherit to the :before and :after
            = so it perfectly matches the parent it's set on
        - I set a radial mask to cover the :before and :after perfectly
            = with a little 0.25px buffer for sub-pixel anti-aliasing
        - I make the mask 200% to cover the other edges of the :before and :after
        - Then I position the mask in the bottom corner 
    */
    
    aspect-ratio: 1;
    width: var(--radius, 20px); 
    /* the width of the :before/:after is the outer corner size */
    background: inherit;
    mask-image: radial-gradient(100% 100% at center, transparent calc(50% - 0.25px), black calc(50% + 0.25px));
    /* the mask is flexible and scales with the width, no need to edit it */
    mask-size: 200% 200%;
    mask-position: 100% 100%;
    pointer-events: none;
        
    /*
        this is just normal positioning of the :before and :after to
        get them set at the bottom left of the parent container
    */
    content: "";
    position: absolute;
    bottom: 0;
    left: calc( var(--radius, 20px) * -1);
}
.tab::after {
    /*
        and for the other side, I simply flip the whole box horizontally
        and position it at the end of the parent container
    */
    scale: -1 1;
    left: auto;
    right: calc( var(--radius, 20px) * -1);
}

/*
    just some extra styling for the top-tabs to show
    the outside corners can be easily set on top (or sides)
*/
.top .tab {
    border-radius: 0 0 var(--radius) var(--radius);
}
.top .tab::before,
.top .tab::after {
    bottom: auto;
    top: 0;
    scale: 1 -1;
}
.top .tab::after {
    bottom: auto;
    top: 0;
    scale: -1 -1;
}


/* 






not important for the effect, just for demo purpose 






*/

:root {
    --h: 240;
    --s: 18%;
    --light: hsl(var(--h), var(--s), 95%);
    --dark: hsl(var(--h), var(--s), 15%);
    --fg: var(--light);
    --bg: var(--dark);
    --grad: url("data:image/svg+xml,%3Csvg viewBox='0 0 0 0' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 68% 1%, hsla(253, 66%, 75%, 1) 7%, transparent 61%), radial-gradient(circle at 1% 48%, hsla(226, 66%, 63%, 1) 13%, transparent 54%), radial-gradient(circle at 58% 29%, hsla(359, 63%, 67%, 1) 19%, transparent 81%), radial-gradient(circle at 83% 79%, hsla(181, 88%, 59%, 1) 15%, transparent 61%), radial-gradient(circle at 85% 56%, hsla(293, 91%, 54%, 1) 0%, transparent 78%), radial-gradient(circle at 20% 43%, hsla(293, 89%, 59%, 1) 8%, transparent 55%), radial-gradient(circle at 63% 14%, hsla(197, 99%, 92%, 1) 9%, transparent 69%), radial-gradient(circle at 51% 27%, hsla(251, 96%, 90%, 1) 4%, transparent 50%), radial-gradient(circle at 26% 50%, hsla(270, 63%, 55%, 1) 20%, transparent 71%), radial-gradient(circle at 65% 83%, hsla(278, 99%, 97%, 1) 2%, transparent 90%);
    /*
    
        I'm only setting colors with variables here so that I can
        easily change them with the color inputs and javascript in the
        demo to demonstrate the flexibility.
    
        The variables are not needed for the effect!
    
    */
}

section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    resize: horizontal;
    background: var(--bg);
    background-image: var(--img, var(--grad));
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
    background-size: cover;
    border-radius: 12px;
    padding-inline: 2em;
    min-height: 200px;
}
section > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 2px;
}
section > div.top {
    align-items: flex-start;
}

.tab:not(section) {
    min-width: 3em;
    padding-inline: 2.5em;
    transition: all 0.25s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--fg);
    color: var(--bg);
    color: color-mix(in hsl, var(--fg), var(--bg) 50%);
}

.tab.selected {
    z-index: 2;
    height: calc(var(--height) + 4px);
}

.tab {
    background-color: color-mix(in hsl, var(--fg), var(--bg) 30%);
    &:hover {
       background-color: color-mix(in hsl, var(--fg), var(--bg) 20%);
        z-index: 1;
    }
}

.inputs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

#app {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 200px 120px;
    max-width: 600px;
    margin: auto;
    place-content: center;
    row-gap: 2em;
    text-align: center;
}


html, body {
    display: grid;
    grid-template: 1fr / 1fr;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    background: var(--bg);
}

button {
    height: 2.5em;
    border: 6px solid white;
    background: var(--grad);
    border-radius: 100px;
    &:hover,
    &:focus {
        box-shadow: none;
        border-color: white;
    }
}

input[type=color] {
    max-width: 76px!important;
}

input[type=range] {
    --bg: var(--light);
    --fg: var(--dark);
}

header {
    color: var(--light);
    text-wrap: balance;
}

header p {
    color: hsl(var(--h), var(--s), 60%);
}

header strong {
    color: hsl(var(--h), var(--s), 90%);
}

#app {
  --bor: hsl(var(--h), var(--s), 85%);
  --bg: var(--dark);
  --fg: var(--light);
  --b: hsla(var(--h), var(--s), 100%, 1);
  --svg: var(--fg);
}