/**
  name: Tab Panel
  type: ui
  modifiers:
    --stretch-mobile: Stretches tabs to full width
  examples:
    Simple Tab Panel:
      include: tabs.html
*/

.tabpanel {
	$root: &;

	&__list {
		@extend %clearfix;
		border: solid $color-silver-grey;
		border-width: 1px 0;
		height: 52px;
	}

	&__tab {
		float: left;
		border: solid $color-silver-grey;
		border-width: 0 1px 0 0;
		position: relative;
		cursor: pointer;

		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0;
			border-bottom: 0 solid $color-telenor-blue;
			z-index: 3;
			transition: border-bottom-width 0.15s ease-in-out;
		}

		&.flexnav {

		  &__invisible{
			display: none;
		  }
		  .flexnav__toggler{
			&:after{
			  @extend %icon-base-styles;
			  @include icon-arrow-down;
			  font-size:12px;
			  margin-left:4px
			}
		  }

			padding: 0;
			height: auto;
		  .flexnav__subnav{
			display: none;
			background-color: $color-white;
			min-width: 200px;
			box-shadow: 0 5px 10px 0 rgba(0,0,0,.23);
			transition: all .3s ease-out .1s;
			position: absolute;
			@include zindex(ui-top);
			right: -1px;
			top: 100%;
		  }
		  &.is-open{
			.flexnav__toggler{
			  &:after{
				@include icon-arrow-up;
			  }
			}
			.flexnav__subnav {
			  display: block;
			}
		  }
		}

		&.is-open,
		&.is-active,
		&:hover {
			&:after {
				border-bottom-width: 3px;
			}

			#{$root}__link {
				color: $color-telenor-blue;
				text-decoration: none;
			}

			.flexnav__subnav {
			  li{
				float: none;
				border-top: 1px solid $color-silver-grey;
			  }
				#{$root}__tab {
					&:before {
						height: 0;
					}

					&:hover {
						&:before {
							height: 3px;
						}
					}
				}

				#{$root}__link {
					color: $color-stone-grey;

					&:hover {
						color: $color-telenor-blue;
					}
				}
			}
		}
	}

	&__link {
		display: block;
		padding: 13px 25px 12px;
		color: $color-stone-grey;
		position: relative;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
    &__manage{
	  & .tabpanel__tab.flexnav{
		width: 100px;
	  }
	  > .tabpanel__tab{
		padding: 0 50px 0 25px;
		width: 184px;
		text-align: center;

		> .tabpanel__link{
			padding: 10px 0 8px;
			max-width: 104px;
			display:inline-block;
			&:before{
			  float:left;
		   }
		}
	  }
	}

    &__closed{
	  color: $color-steel-grey;
	  float: left;
	  padding: 12px 0 6px 10px;
	  position: absolute;
	}
	&__panel {
		clear: both;
		display: none;
		outline: none;

		&.is-active {
			display: block;
		}
	}
	
	&__group {
		@extend %text-size--16;

		@include until($bp-medium) {
			display: table;
			width: 100%;
		}

		#{$root}__tab {
			border: 0;

			&:after {
				display: none;
			}

			@include until($bp-medium) {
				display: table-cell;
				float: none;
			}

			&:first-child a {
				border-radius: 2px 0 0 2px;
			}

			&:last-child a {
				border-radius: 0 2px 2px 0;
				border-width: 1px;
			}

			a {
				height: $base-button-size;
				line-height: $base-button-size;
				background: $color-white;
				border: 1px solid $color-silver-grey;
				border-width: 1px 0 1px 1px;
				color: $color-stone-grey;
				display: block;
				padding: 0 $small-spacing-unit;
				text-align: center;

				@include until($bp-medium) {
					@include truncate;
				}

				&:hover,
				&:focus,
				&:active {
				    @include gradient-vertical($start-color: #fff, $end-color: #e8e8e8);
					border-color: $color-steel-grey;
				}

				&:active {
					box-shadow: inset 0 0 6px rgba(0, 0, 0, .13);
				}
			}

			&:hover + li a {
				border-left-color: $color-steel-grey;
			}

			&.is-active a {
				background: linear-gradient(to bottom, $color-silver-grey 0%, $color-steel-grey 100%);
				border-color: transparent;
				color: $color-white;
				cursor: default;
			}

			&.is-default a {
				background: none;
				border-color: transparent;
				cursor: default;

				&:hover {
					background: none;
				}

				&:active {
					box-shadow: none;
				}
			}

			&.is-disabled a {
				pointer-events: none;
				color: rgba($color-stone-grey, .3);
			}
		}
	}
	
	&__content-wrapper {
		height: auto !important;
	}
}