.rdtabs--card {
    --line-width: 0.1em;
    --radius: 10px;

    --width: 1.5em;

    .rdtabs__tabheader-inner {
        display: flex;
        width: 100%;
    }

    .rdtabs__tab-inner {
        // background-color: red;
        display: flex;
        align-items: center;
        align-content: center;
        text-align: center;
        height: 100%;
        padding: var(--radius) 15px;
    }

    .rdtabs__tabheader {
        // border-bottom: 2px #D0D9E1 solid;
        display: flex;
        // justify-items: center;

        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding-top: 10px;

        // Rounded
        background-color: var(--background-color-accent-lvl2);
    }

    .rdtabs__rightendcap {
        flex-grow: 1;

        .rdtabs__tab-inner {
            flex-grow: 1;
        }
    }

    .rdtabs__tab--active {
        background-color: var(--background-color-lvl2);;
        border-bottom: var(--line-width) solid var(--background-color-lvl2);;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);

        .rdtabs__tab-inner {
            clip-path: inset(0 0 8px 0);
            background-color: var(--background-color-lvl2);
            border-top: var(--line-width) solid #D3DBE5;
            border-left: var(--line-width) solid #D3DBE5;
            border-right: var(--line-width) solid #D3DBE5;
            border-top-left-radius: var(--radius);
            border-top-right-radius: var(--radius);

        }
    }

    .rdtabs__tab--active:after {
        // background-color: red;
        height: var(--width);
        width: var(--width);
        position: absolute;
        content: '';
        border: var(--line-width) solid #D3DBE5;
        border-bottom-left-radius: 6px;
        // background-color: #F9F9F9;
        border-radius: 50%;
        bottom: calc(var(--line-width) * -1);
        left: calc(var(--width) * -1 + var(--line-width));
        clip-path: inset(calc(var(--width)/2) 0 0 calc(var(--width)/2));
    }

    .rdtabs__tab-component:not(.rdtabs__tab--active) {
        .rdtabs__tab-inner {
            border-left: var(--line-width) solid var(--background-color-accent-lvl2);
            border-right: var(--line-width) solid var(--background-color-accent-lvl2);
            border-top: var(--line-width) solid transparent;
            border-bottom: var(--line-width) solid #D3DBE5;
            background-color: var(--background-color-accent-lvl2);
        }

        .rdtabs__tab-inner:after {
            content: '';
            position: absolute;
            height: 5px;
            width: 100%;
            bottom: 0;
            left: 0;
            border-bottom-width: var(--line-width);
            border-bottom-style: solid;
            border-bottom-color: #D3DBE5;
        }
    }


    .rdtabs__tab-previous {
        background-color: var(--background-color-lvl2);
        .rdtabs__tab-inner {
            clip-path: inset(0 8px 0 0);
        }
    }

    .rdtabs__tab-previous:before {
        content: '';
        height: 100%;
        width: var(--radius);
        right:0;
        background-color: var(--background-color-accent-lvl2);
        border-bottom-right-radius: var(--radius);
        position: absolute;
    }

    .rdtabs__tab--active + .rdtabs__tab-component {
        background-color: var(--background-color-lvl2);
        .rdtabs__tab-inner {
            clip-path: inset(0 0 0 8px);
        }
    }

    .rdtabs__tab--active + .rdtabs__tab-component:before {
        content: '';
        height: 100%;
        width: var(--radius);
        left:0;
        background-color: var(--background-color-accent-lvl2);
        border-bottom-left-radius: var(--radius);
        position: absolute;
    }
    .rdtabs__tab--active + .rdtabs__tab-component:after {
        height: var(--width);
        width: var(--width);
        position: absolute;
        content: '';
        border: var(--line-width) solid #D3DBE5;
        border-bottom-left-radius: 6px;
        border-radius: 50%;
        bottom: 0;
        left: calc(var(--line-width) * -1);
        clip-path: inset(calc(var(--width)/2) calc(var(--width)/2) 0 0);
    }

    .rdtabs__tablist {
        display: flex;
        width: 100%;
        align-items: center;
        position: relative;
    }

    .rdtabs__tab-component {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        font-weight: 600;
        color: var(--text-muted-color);
        height: 100%;
    }

    .rdtabs__tab--active {
        color: var(--font-color);
    }

}