feat: primevue tab component general styles

[J0taFerreira]

• Styling for the primevue component

[MCatherine1994]

I feel many of the style changes is not needed, please try the following one and see if make sense to you. How we remove border and set it back when on focus could see how we handle that for input or dropdown, it's the same idea. Also for the tab style when on focus, we should follow the design in the common component design in Figma. So the border width when on focus is 0.125rem.

/* ------------------------------------ tabView ----------------------------- */

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-panels {
    padding: 0;
    background-color: transparent;
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav {
    border: none;
    border-width: 0;
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav
.#{variables.$primevue-prefix}-tabview-header
.#{variables.$primevue-prefix}-tabview-nav-link {
    justify-content: space-between;
    min-width: 11.16rem;
    font-weight: 400;
    background-color: map.get(lightTheme.$light-theme, 'border-subtle-00');
    border-color: map.get(lightTheme.$light-theme, 'border-subtle-00');
    border-radius: 0;
    border: none;
    border-top: 0.125rem solid transparent;
    border-bottom: 0.125rem solid transparent;
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav-link
.#{variables.$primevue-prefix}-tabview-title {
    font-size: 0.875rem;
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav
.#{variables.$primevue-prefix}-tabview-header:first-child
.#{variables.$primevue-prefix}-tabview-nav-link {
    border-top-left-radius: 0.25rem;
    border-left: solid 0.0625rem map.get(lightTheme.$light-theme, 'border-subtle-00');
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav
.#{variables.$primevue-prefix}-tabview-header:nth-last-child(2)
.#{variables.$primevue-prefix}-tabview-nav-link {
    border-top-right-radius: 0.25rem;
    border-right: solid 0.0625rem map.get(lightTheme.$light-theme, 'border-subtle-00');
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav
.#{variables.$primevue-prefix}-tabview-header.#{variables.$primevue-prefix}-highlight
.#{variables.$primevue-prefix}-tabview-nav-link {
    font-weight: 700;
    border-top: solid 0.125rem map.get(
        lightTheme.$light-theme,
        'border-interactive'
    );
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav
.#{variables.$primevue-prefix}-tabview-header:not(.#{variables.$primevue-prefix}-highlight)
.#{variables.$primevue-prefix}-tabview-nav-link:hover {
    background-color: map.get(lightTheme.$light-theme, 'layer-accent-hover-01') !important;
}

.#{variables.$primevue-prefix}-tabview
.#{variables.$primevue-prefix}-tabview-nav
.#{variables.$primevue-prefix}-tabview-header
.#{variables.$primevue-prefix}-tabview-nav-link:focus {
    box-shadow: none !important;
    border: 0.125rem solid map.get(lightTheme.$light-theme, 'focus') !important;
}

@media (min-width: 500px) {
    .#{variables.$primevue-prefix}-tabview
    .#{variables.$primevue-prefix}-tabview-nav-link {
        min-width: 14.5rem !important;
    }
}

@media (max-width: 390px) {
    .#{variables.$primevue-prefix}-tabview
    .#{variables.$primevue-prefix}-tabview-nav {
        display: none;
    }
}