/*!******************************************************************************
 * Copyright (c) 2017, WP Popup Maker
 ******************************************************************************/

$tab-color: #E4E4E4 !default;
$plugin-prefix: 'plugin' !default;

.#{$plugin-prefix}-tabs-container {
  box-sizing: border-box;

  > * {
    box-sizing: border-box;
  }

  position: relative;

  > ul.tabs {
    margin: 0;

    .tab {
      font-size: 1.2em;

      a {
        padding: 8px 16px;
        border: 0;
        display: block;
        text-decoration: none;
        &:focus {
          box-shadow: none;
        }
      }

    }
  }

  > .tab-content {

    display: none;
    padding: 16px;

    &.active {
      display: block;
    }

    .form-table {
      display: block;

      &:first-child {
        margin-top: 0;
      }
    }
  }

  &.horizontal-tabs {
    display: block;

    > ul.tabs {
      > li.tab {

        display: inline-block;
        padding: 0;
        margin: 0;

        a {
          padding: .5em 1em;

        }

      }

    }

    > .tab-content {
      padding-top: 16px;
    }
  }

  &.vertical-tabs {
    min-height: 100px;
    //padding-left: 150px;
    //width: calc(100% - 150px);
    padding-left: 140px;
    width: 100%;

    > ul.tabs {
      width: 140px;
      min-height: 100%;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      margin: 0;
      //background: #23282D;
      border-top: 0;
      border-right: 1px solid #DFDFDF;

      > .tab {
        margin: 0;
        display: block;
        border-bottom: 1px solid #eee;

        a {
          background: #FCFCFC;
          color: #000;
          display: block;
        }

        &:hover a, a:focus {
          background-color: #0073AA;
        }

        &.active {

          a {
            background-color: #32373C;
            color: #fff;
          }
        }

        &:first-child {
          margin-top: 8px;
        }

      }
    }

    > .tab-content {
    }

  }

  &.link-tabs {

    > ul.tabs {
      display: block;

      > li.tab {
        display: inline-block;

        a {
          display: inline;
          padding: 0 0.25em;
          color: #0073aa;
        }

        &.active a,
        a:active {
          color: #000;
        }

        &.active a,
        &:hover a,
        a:active {
          text-decoration: underline;
        }

        &::after {
          display: inline-block;
          content: "|";
          margin: 0 0.25em;
        }

        &:last-child::after {
          content: "";
        }

      }
    }

  }

  &.sub-tabs {
    > .tab-content {
      padding: 16px 0 0;

      .#{$plugin-prefix}-field:first-child {
        h3 {
          margin-top: 0;
        }
      }
    }
  }

  &[data-tab-count="0"],
  &[data-tab-count="1"] {
    &.horizontal-tabs {
      > ul.tabs {
        display: none;
      }
    }

    &.sub-tabs {
      > .tab-content {
        padding-top: 0;
      }
    }
  }
}

#pum-settings_extensions .pum-tabs-container[data-tab-count="1"].horizontal-tabs > ul.tabs {
  display: block!important;
}

#pum-settings_extensions .pum-tabs-container[data-tab-count="1"].sub-tabs > .tab-content {
  padding-top: 16px!important;
}