@import "colors/index";
$tabs-border-fill: $color-bg-med;
$tabs-active-border-fill: $color-blue;
$tabs-text-color: $color-text-med-dark;
$tabs-active-text-color: $color-white;

.swui-tabs {
  margin-bottom: 2em;
  display: block;

  .swui-tabs-list {
    display: block;
    border-bottom: solid 2px $tabs-border-fill;

    li {
      display: inline-block;

      &.active {
        button,
        button:focus,
        button:hover {
          color: $tabs-active-text-color;
          border-width: 0;
        }
      }

      &.active,
      &:hover {
        button:not([disabled])::after {
          transform: scale(1);
        }
      }

      button {
        border: none;
        color: $tabs-text-color;
        background: transparent;
        outline: none;
        box-shadow: none;
        font-size: 1.1rem;
        box-sizing: border-box;
        display: inline-block;
        margin: 0;
        padding: 0.35em 0.75em;
        position: relative;
        text-align: center;
        user-select: none;
        font: inherit;
        font-size: 0.9em;
        outline: none;
        bottom: -1px;

        &:not([disabled]) {
          &:hover {
            border: none;
            color: $tabs-active-text-color;
            background: transparent;
            opacity: 1;
          }
        }

        &::after {
          content: "";
          background: $tabs-active-border-fill;
          height: 2px;
          position: absolute;
          width: 100%;
          left: 0;
          bottom: -1px;
          transition: all 250ms ease 0s;
          transform: scale(0);
          background: $tabs-active-border-fill none repeat scroll 0 0;
          color: $tabs-active-text-color;
        }
      }
    }
  }

  .swui-tab-content {
    // do we really want to pad this by default?
    // padding: 1.5em;
  }
}