@import '../../shared/styles/variables';

:host {
  overflow: hidden;
  display: block;
}

header {
  font-family: $headers-font;
  font-size: 0.929em;
  text-transform: uppercase;
  margin: 0;
  color: $sample-panel-headers-color;
  text-transform: uppercase;
  font-weight: normal;
}

:host /deep/ > tabs > ul li {
  font-family: $headers-font;
  font-size: 0.929em;
  border-radius: $border-radius;
  margin: 2px 0;
  padding: 2px 8px 3px 8px;
  color: $sample-panel-headers-color;
  line-height: 16px;

  &:hover {
    color: #ffffff;
    background-color: rgba(white, .1);
  }

  &.active {
    background-color: white;
    color: $black;
  }
}

:host /deep/ tabs ul {
  padding-top: 10px;
}