.tabs {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
  display: block;

  .content {
    border-radius: 3px;
    padding: 30px;
    border: 1px solid @color_grey-light;
    width: 100%;

    p:last-child {
      margin: 0;
    }
  }
  .tab-content {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid @color_grey-light;
    border-radius: 0.3em;
    transition: 0.2s;
    padding: 24px 24px 0;

    &:hover {
      box-shadow: 0 0 10px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
    }
  }

  .steps {
    margin: 0;

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;

      & > li {
        display: inline-block;
        vertical-align: top;
        zoom: 1;
        *display: inline;
        background-color: @color_grey-lighter;
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin-right: 10px;
        margin-bottom: -1px;
        border-radius: 3px;
        border-bottom: 0;

        i {
          margin-left: 2px;
          margin-right: 8px;
        }

        &.current {
          background-color: white;
          border-bottom: 1px solid white;
          outline: none;

          a, a:hover {
            outline: none;
          }
        }

        a {
          .fz(14);
          color: @color_black;
          padding: 10px 15px;
          display: block;

          &:hover {
            color: @color_black;
            text-decoration: none;
          }
        }
      }
    }
  }
}

.tab-title {
  display: none;
}

.tab-flex {
  display: flex;
  align-items: baseline;
}

.tab-split {
  width: 50%;
}

.tab-live {
  border-top: 1px solid #eaeefb;
  height: 35px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: right;
  margin-top: -1px;
  color: #d3dce6;
  cursor: pointer;
  position: relative;

  a,span {
    text-decoration: none;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    border-bottom: none !important;
  }
}

.code-live-modal {
  .tab-live-code-row {
    display: flex;
    align-items: stretch !important;

    .tab-live-code-col {

      textarea:focus {
        outline: none
      }

      &:first-of-type {
        border-right: 1px solid #EBEBEB;
      }
    }
  }
}

.media-mixin(@break) when (@break = @break-small-x) {
  .tabs .steps {
    display: block;
  }
  .tabs .steps ul > li {
    display: block;
    width: 100%;
  }
}
