@import "../base/variables";
@import "../base/mixins";

.h5p-sdk {
  .tab-panel {
    border: 0.042em solid $c2;

    [role="tablist"] {
      background-color: $c3;
      list-style: none;
      padding-left: 1em;
      margin: 0;
      border-bottom: 0.042em solid $c2;

      > span {
      	display: block;
      	height: 0.3em;
      	background: $ac1;
      	position: relative;
        transition: all .5s ease;
      }
    }

    [role="tab"] {
      display: inline-block;
      padding: $gutter;
      text-decoration: none;
      text-align: center;
      color: $text-dark;
      cursor: pointer;
      transition: all .5s ease;
      outline-color: $ac1;

      &:nth-child(1) ~ span,
      &:nth-child(1)[aria-selected="true"] ~ span {
        height: 0.27em;
        width: 200px;
        right: 0;
      }

      &:nth-child(2) ~ span,
      &:nth-child(2)[aria-selected="true"] ~ span {
        height: 0.27em;
        width: 4em;
        right: -230px;
      }
    }

    [role="tabpanel"] {
      .tab-panel-inner {
        padding: $gutter;
      }
    }
  }
}