/***************************
 * Default Tab Style
 ***************************/

[role="tablist"] {
    border-bottom:solid 1px var(--gray40);
    margin-bottom:calc( var(--rhythm) * 3);
    line-height:normal;
}

[role="tablist"] > [role="tab"] {
    cursor:pointer;
    display:inline-block;
    padding-top:var(--rhythm);
    padding-bottom:calc( var(--rhythm) * 0.5);
    padding-left:calc( var(--rhythm) * 2);
    padding-right:calc( var(--rhythm) * 2);
    margin:0px 2px -1px 0px;
    background-color:var(--gray05);
    border:solid 1px var(--gray30);
    border-bottom:solid 1px var(--gray40);
	border-top-left-radius:calc(var(--rhythm) * 0.75);
	border-top-right-radius: calc(var(--rhythm) * 0.75);
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
    color:var(--gray70);
    font-family:inherit;
    font-size:0.9rem;
    text-decoration:none;
}

[role="tablist"] > [role="tab"]:hover:not([disabled]),
[role="tablist"] > [role="tab"]:focus:not([disabled]) {
    background-color:var(--gray10);
    border-color:var(--gray40);
    border-bottom:solid 1px var(--gray40);
    color:var(--gray80);
}

[role="tablist"] > [role="tab"][disabled] {
    background-color:var(--gray10);
    color:var(--gray30);
    cursor:default;
}

[role="tablist"] > [role="tab"][aria-selected="true"]:not([disabled]),
[role="tablist"] > [role="tab"][aria-selected="true"]:not([disabled]):hover,
[role="tablist"] > [role="tab"].selected:not([disabled]), 
[role="tablist"] > [role="tab"].selected:not([disabled]):hover {
    border-color:var(--gray40);
    border-bottom:solid 1px var(--page-background);
    background-color:var(--page-background);
    color:var(--gray100);
}

/******************************************
 * Underline Style Tabs
 ******************************************/

 [role="tablist"].underlined {
    border-bottom:none;
    margin-bottom:calc( var(--rhythm) * 3);
    line-height:1em;
}

[role="tablist"].underlined > [role="tab"] {
    cursor:pointer;
    display:inline-block;
    padding:8px 16px;
    margin:0px;
    background-color:rgba(0,0,0,0);
    border:none;
    border-bottom:solid 3px rgba(0,0,0,0);
    border-radius:0px; 
    color:var(--gray80);
    font-family:inherit;
    font-size:1rem;
    text-decoration:none;
}

[role="tablist"].underlined > [role="tab"]:hover:not([disabled]),
[role="tablist"].underlined > [role="tab"]:focus:not([disabled]) {
    background-color:var(--gray10);
    border:none;
    border-bottom:solid 3px rgba(0,0,0,0);
    border-radius:6px;
    color:var(--gray80);
}

[role="tablist"].underlined > [role="tab"][disabled] {
    background-color:rgba(0,0,0,0);
    color:var(--gray30);
    cursor:default;
}

[role="tablist"].underlined > [role="tab"][aria-selected="true"]:not([disabled]),
[role="tablist"].underlined > [role="tab"].selected:not([disabled]) {
    border-color:var(--gray40);
    border-bottom:solid 3px var(--blue60);
    border-radius:0px;
    background-color:rgba(0,0,0,0);
    color:var(--gray100);
    padding:8px;
    margin:0px 8px;
    font-weight:500;
}

/******************************************
 * Pill Style Tabs
 ******************************************/

 [role="tablist"].pills {
    border-bottom:none;
    margin-bottom:calc( var(--rhythm) * 2);
    line-height:1em;
    font-weight:400;
    font-family:inherit;
    font-size:0.8rem;
}

[role="tablist"].pills > [role="tab"] {
    background-color:var(--gray10);
    border:none;
    margin:0px 4px 0px 0px;
    padding:8px 12px;

    cursor:pointer;
    display:inline-block;
    border-radius:4px; 
    color:var(--gray80);
    text-decoration:none;
}

[role="tablist"].pills > [role="tab"]:hover:not([disabled]),
[role="tablist"].pills > [role="tab"]:focus:not([disabled]) {
    border:none;
    margin:0px 4px 0px 0px;
    padding:8px 12px;

    background-color:var(--gray15);
    color:var(--black);
}

[role="tablist"].pills > [role="tab"][disabled] {
    color:var(--gray60);
    cursor:default;
}

[role="tablist"].pills > [role="tab"][aria-selected="true"],
[role="tablist"].pills > [role="tab"][aria-selected="true"]:hover,
[role="tablist"].pills > [role="tab"].selected,
[role="tablist"].pills > [role="tab"].selected:hover {
    border:none;
    margin:0px 4px 0px 0px;
    padding:8px 12px;

    border: solid 1px var(--blue60);
	background-color:var(--white);
    color:var(--blue60);
}


/******************************************
 * Wizard Style Tabs
 ******************************************/

/* Tab Bar */
[role="tablist"].wizard {
	display: flex;
	flex-direction:row;
	align-items:start;
    margin-bottom:calc( var(--rhythm) * 2);
    line-height:1em;
    font-weight:400;
    font-family:inherit;
    font-size:0.8rem;
	padding:8px 16px;
	border:none;
}

/* Regular Tab */
[role="tablist"].wizard > [role="tab"] {
    background-color:unset;
    border:none;
    margin:0px;
    padding:8px 12px;

    cursor:pointer;
    border-radius:8px;
    text-decoration:none;

	color:var(--blue60);
	display:flex;
	flex-direction:column;
	align-items:center;
}

[role="tablist"].wizard > [role="tab"]:hover {
	border:none;
	background-color:unset;
	margin:0px;
	padding:8px 12px;
}

[role="tablist"].wizard > [role="tab"] .step-number {
	display:flex;
	justify-content:center;
	align-items:center;
	height:24px;
	width:24px;
	border-radius:50%;
	background-color:var(--blue60);
	color:var(--white);
	font-size:12px;
	margin:8px 8px 18px 8px;
	transition:height 0.1s, width 0.1s, font-size 0.1s, margin 0.1s;
}

[role="tablist"].wizard > [role="tab"] .step-label {
	font-size:16px;
	color:var(--blue60);
	text-align:center;
	line-height:120%;
}

[role="tablist"].wizard > .line {
	width:48px;
	height: 4px;
	border-radius:2px;
	background-color: var(--blue60);
	margin:28px -12px 0px -12px;
}

/* Selected Tab */
[role="tablist"].wizard > [role="tab"][aria-selected="true"],
[role="tablist"].wizard > [role="tab"][aria-selected="true"]:hover {
	background-color:unset;
}

[role="tablist"].wizard > [role="tab"][aria-selected="true"] .step-number,
[role="tablist"].wizard > [role="tab"]:hover .step-number {
	height:42px;
	width:42px;
	font-size:24px;
	margin:0px 0px 8px 0px;
	transition:height 0.1s, width 0.1s, font-size 0.1s, margin 0.1s;
}

/* Completed Tab */
[role="tablist"].wizard > [role="tab"].done {
	color: var(--green70);
}

[role="tablist"].wizard > [role="tab"].done .step-number {
	background-color:var(--green70);
	color:var(--white);
}

[role="tablist"].wizard > [role="tab"].done .step-label {
	color:var(--green70);
}

[role="tablist"].wizard > .line.done {
	background-color: var(--green70);
}

/* Disabled Tab */
[role="tablist"].wizard > [role="tab"][disabled] {
    color:var(--gray40);
    cursor:default;
	pointer-events: none;
}

[role="tablist"].wizard > [role="tab"][disabled] .step-number {
	background-color:var(--gray40);
	color:var(--white);
}

[role="tablist"].wizard > [role="tab"][disabled] .step-label {
	color:var(--gray40);
}

[role="tablist"].wizard > [disabled].line {
	background-color: var(--gray40);
}


/******************************************
 * Vertical Tabs
 ******************************************/


[role="tablist"].vertical {
    border:none;
    border-right:solid 1px var(--gray40);
    margin-bottom:none;
    margin-right:calc( var(--rhythm) * 2);
    line-height:normal;
}

[role="tablist"].vertical > [role="tab"] {
    cursor:pointer;
    display:block;
    padding-top:var(--rhythm);
    padding-bottom:var(--rhythm);
    padding-left:0px;
    padding-right:calc( var(--rhythm) * 2);
    margin:0px;
    margin-right:var(--rhythm);
    background-color:transparent;
    border:none;
    border-radius:0px;
    border-bottom: solid 1px var(--gray20);
    color:var(--link-color);
    font-family:inherit;
    font-size:0.9rem;
    text-decoration:none;
}

[role="tablist"].vertical > [role="tab"]:first-child,
[role="tablist"].vertical > [role="tab"]:hover:not([disabled]):first-child,
[role="tablist"].vertical > [role="tab"]:focus:not([disabled]):first-child {
    border-top: solid 1px var(--gray20);
}

[role="tablist"].vertical > [role="tab"]:hover:not([disabled]),
[role="tablist"].vertical > [role="tab"]:focus:not([disabled]) {
    background-color:transparent;
    border:none;
    border-bottom: solid 1px var(--gray20);
    color:var(--link-color);
}

[role="tablist"].vertical > [role="tab"][disabled] {
    background-color:transparent;
    opacity:0.5;
    cursor:default;
}

[role="tablist"].vertical > [role="tab"][aria-selected="true"]:not([disabled]),
[role="tablist"].vertical > [role="tab"][aria-selected="true"]:not([disabled]):hover,
[role="tablist"].vertical > [role="tab"].selected:not([disabled]), 
[role="tablist"].vertical > [role="tab"].selected:not([disabled]):hover {
    border-bottom: solid 1px var(--gray20);
    background-color:transparent;
    color:var(--textColor);
    font-weight:bold;
}
