//
// ui-tabs.scss
// Styles for tabs not provided by the Channel SDK UI
// Kit.
// --------------------------------------------------

.next-tab__list {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #f5f6f7;
  overflow: visible;
  border-radius: 3px 3px 0 0;

  flex-wrap: nowrap;
  display: flex;
  align-items: stretch;

  > li {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;

    &:first-child .next-tab {
      border-top-left-radius: 3px;
    }
  }
}

.next-tab {
  padding: 15px 20px;
  text-decoration: none;
  color: #798c9c;
  border-right: 1px solid #ebeef0;
  border-bottom: 1px solid #ebeef0;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  &:focus,
  &:hover {
    outline: none;
    background-color: #fafbfc;
    color: #479ccf;
    text-decoration: none;
  }

  &.next-tab--is-active {
    background-color: #ffffff;
    color: #31373d;
    border-bottom-color: #ffffff;
    cursor: default;
    text-decoration: none;
  }
}