:root {
    --hbl-vertical-tab-text: #122d50;
    --hbl-vertical-tab-icon: #6c757d;
    --hbl-vertical-tab-hover-text: #122d50;
    --hbl-vertical-tab-hover-bg: rgba(18, 45, 80, 0.06);
    --hbl-vertical-tab-active-bg: rgba(241, 94, 34, 0.16);
    --hbl-vertical-tab-active-border: #f15e22;
    --hbl-vertical-tab-active-text: #122d50;
    --hbl-vertical-tab-active-icon: #f15e22;
    --hbl-vertical-tab-disabled-text: #9aa3af;
    --hbl-vertical-tab-disabled-icon: #9aa3af;
}

.hbl-vertical-tabs {
    display: flex;
    flex-direction: column;
}

.hbl-vertical-tab-link {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    border-left: 3px solid transparent;
    color: var(--hbl-vertical-tab-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    background: transparent;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hbl-vertical-tab-link > i:first-child {
    width: 1.25rem;
    flex-shrink: 0;
    color: var(--hbl-vertical-tab-icon);
    transition: color 0.15s ease;
}

.hbl-vertical-tab-link:hover,
.hbl-vertical-tab-link:focus {
    background: var(--hbl-vertical-tab-hover-bg);
    color: var(--hbl-vertical-tab-hover-text);
    text-decoration: none;
    box-shadow: none;
}

.hbl-vertical-tab-link:hover > i:first-child,
.hbl-vertical-tab-link:focus > i:first-child {
    color: currentColor;
}

.hbl-vertical-tab-link.active,
.hbl-vertical-tab-link.active:hover,
.hbl-vertical-tab-link.active:focus {
    background: var(--hbl-vertical-tab-active-bg) !important;
    border-left-color: var(--hbl-vertical-tab-active-border);
    color: var(--hbl-vertical-tab-active-text) !important;
    font-weight: 500;
    box-shadow: none;
}

.hbl-vertical-tab-link.active > i:first-child {
    color: var(--hbl-vertical-tab-active-icon);
}

.hbl-vertical-tab-link.disabled,
.hbl-vertical-tab-link[aria-disabled="true"] {
    color: var(--hbl-vertical-tab-disabled-text);
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}

.hbl-vertical-tab-link.disabled > i:first-child,
.hbl-vertical-tab-link[aria-disabled="true"] > i:first-child {
    color: var(--hbl-vertical-tab-disabled-icon);
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link {
    color: #b0bac9;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link > i:first-child {
    color: #8b95a8;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link:hover,
body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #e8edf4;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link.active,
body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link.active:hover,
body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link.active:focus {
    background: rgba(241, 94, 34, 0.22) !important;
    border-left-color: #f15e22 !important;
    color: #ffffff !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link.active > i:first-child {
    color: #f15e22 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link.disabled,
body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link[aria-disabled="true"] {
    color: #7c8596;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link.disabled > i:first-child,
body.mod-skin-dark:not(.mod-skin-light) .hbl-vertical-tab-link[aria-disabled="true"] > i:first-child {
    color: #7c8596;
}