$tabs-border-bottom-color: transparent !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 2px !default;
$tabs-link-color: $color-pale-sky !default;
$tabs-link-hover-border-bottom-color: $color-cerulean !default;
$tabs-link-hover-color: $color-cerulean !default;
$tabs-link-active-border-bottom-color: $color-cerulean !default;
$tabs-link-active-color: $color-lochmara !default;
$tabs-link-padding: rem-calc(16) 0 !default;

$tabs-boxed-link-radius: 0 !default;
$tabs-boxed-link-hover-background-color: $color-white !default;
$tabs-boxed-link-hover-border-bottom-color: $color-cerulean !default;

$tabs-boxed-link-active-background-color: $color-white !default;
$tabs-boxed-link-active-border-color: $color-cerulean !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;

$tabs-toggle-link-border-color: $color-geyser !default;
$tabs-toggle-link-border-style: solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: transparent !default;
$tabs-toggle-link-hover-border-color: $color-cerulean !default;
$tabs-toggle-link-radius: 0 !default;
$tabs-toggle-link-active-background-color: transparent !default;
$tabs-toggle-link-active-border-color: $color-cerulean !default;
$tabs-toggle-link-active-color: $color-lochmara !default;

.tabs {
  //@include block;
  //@include overflow-touch;
  //@include unselectable;

  align-items: stretch;
  display: flex;
  font-size: rem-calc(15);
  justify-content: space-between;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;

  a {
    align-items: center;
    border-bottom-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    color: $tabs-link-color;
    display: flex;
    text-decoration: none;
    justify-content: center;
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    vertical-align: top;
    cursor: pointer;
    transition: color 0.2s border-color 0.2s;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }
    &:focus {
      outline: none;
    }
  }

  li {
    display: block;
    padding: 0 10px;
    &.is-active {
      a {
        border-bottom-color: $tabs-link-active-border-bottom-color;
        color: $tabs-link-active-color;
      }
    }
    &:focus {
      outline: none;
    }
  }

  ul {
    align-items: center;
    border-bottom-color: transparent;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    box-shadow: 0px 1px 0px 0.5px rgba(228,231,235,1);
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;

    &.is-left {
      padding-right: 0.75em;
    }

    &.is-center {
      flex: none;
      justify-content: center;
      padding-left: 0.75em;
      padding-right: 0.75em;
    }

    &.is-right {
      justify-content: flex-end;
      padding-left: 0.75em;
    }
  }

  .icon {
    &:first-child {
      margin-right: 0.5em;
    }

    &:last-child {
      margin-left: 0.5em;
    }
  }

  // Alignment
  &.is-centered {
    ul {
      justify-content: center;
    }
  }

  &.is-right {
    ul {
      justify-content: flex-end;
    }
  }

  // Styles
  &.is-boxed {
    a {
      border: 1px solid transparent;
      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;

      &:hover {
        background-color: $tabs-boxed-link-hover-background-color;
        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
      }
    }

    li {
      &.is-active {
        a {
          background-color: $tabs-boxed-link-active-background-color;
          border-color: $tabs-boxed-link-active-border-color;
          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important;
        }
      }
    }
  }

  &.is-fullwidth {
    li {
      flex-grow: 1;
      flex-shrink: 0;
    }
  }

  &.is-toggle {
    a {
      border-color: $tabs-toggle-link-border-color;
      border-style: $tabs-toggle-link-border-style;
      border-width: $tabs-toggle-link-border-width;
      margin-bottom: 0;
      position: relative;

      &:hover {
        background-color: $tabs-toggle-link-hover-background-color;
        border-color: $tabs-toggle-link-hover-border-color;
        z-index: 2;
      }
    }

    li {
      & + li {
        margin-left: -#{$tabs-toggle-link-border-width};
      }

      &:first-child a {
        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius;
      }

      &:last-child a {
        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0;
      }

      &.is-active {
        a {
          background-color: $tabs-toggle-link-active-background-color;
          border-color: $tabs-toggle-link-active-border-color;
          color: $tabs-toggle-link-active-color;
          z-index: 1;
        }
      }
    }

    ul {
      border-bottom: none;
    }

    &.is-toggle-rounded {
      li {
        &:first-child a {
          border-bottom-left-radius: 4px;
          border-top-left-radius: 4px;
          padding-left: 1.25em;
        }

        &:last-child a {
          border-bottom-right-radius: 4px;
          border-top-right-radius: 4px;
          padding-right: 1.25em;
        }
      }
    }
  }

  // Sizes
  &.is-small {
    font-size: rem-calc(14);
  }

  &.is-medium {
    font-size: rem-calc(16);
  }

  &.is-large {
    font-size: rem-calc(18);
  }
}