.ui-tabs .ui-tabs-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ui-tabs .ui-tabs-nav li a:hover {
    cursor: pointer;
}

.ui-tabs .ui-tabs-nav li a:focus,
.ui-tabs .ui-tabs-nav li a:active {
    text-decoration: none;
}

/* horizontal */
.ui-tabs .ui-tabs-nav-horizontal {
    display: flex;
    border-bottom: 1px solid var(--theme--form--border-color);
}

.ui-tabs .ui-tabs-nav-horizontal > li > a {
    display: block;
    padding: 0.5em 1em;
    color: var(--theme--color--text);
    position: relative;
}

.ui-tabs .ui-tabs-nav-horizontal li.ui-tabs-active a::before,
.ui-tabs .ui-tabs-nav-horizontal li.ui-tabs-error a::before {
    content: '';
    height: 4px;
    width: calc(100% + 2px);
    background: var(--theme--color--primary);
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 2;
}

.ui-tabs .ui-tabs-nav-horizontal li.ui-tabs-error a::before {
    background: var(--theme--color--error);
}

/* vertical */
.ui-tabs .ui-tabs-nav-vertical > li > a {
    display: block;
    padding: 1em 1em;
    border-bottom: 1px solid rgba(0,0,0, 0.2);
    color: var(--theme--color--text);
    position: relative;
}

.ui-tabs .ui-tabs-nav-vertical > li:last-child > a {
    border-bottom: 0;
}

.ui-tabs .ui-tabs-nav-vertical li.ui-tabs-active a::before,
.ui-tabs .ui-tabs-nav-vertical li.ui-tabs-error a::before {
    content: '';
    width: 5px;
    height: calc(100% + 2px);
    background: var(--theme--color--primary);
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 2;
}

.ui-tabs .ui-tabs-nav-vertical li.ui-tabs-error a::before {
    background: var(--theme--color--error);
}

.ui-tabs .ui-tabs-nav-vertical li.ui-tabs-active a::after {
    content: '';
    width: 1px;
    height: 100%;
    background: var(--theme--color--background);
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 2;
}