/**
 * Tabs
 */
ul#woowgallery-tabs-nav {
  flex: 0 0 160px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  list-style: none;

  li {
    margin: 0 -1px 0 0;
    padding: 0;
    position: relative;

    a {
      display: block;
      padding: 20px 0 20px 30px;
      text-decoration: none;
      color: #999;
      border-right: 1px solid #ddd;
      background-position: left center;
      background-repeat: no-repeat;
      transition: all 0.3s;

      .dashicons {
        color: #999;
        vertical-align: middle;
      }

      .tab-label {
        margin-left: 7px;
      }

      /**
      * Focus State
      * - Remove WordPress' blue focus box from tabs
      */
      &:focus {
        box-shadow: none;
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: -1px;
        height: 1px;
        width: 100%;
        overflow: hidden;
        background-color: #ddd;
        transform: scaleX(0.8);
        transition: transform 0.3s;
      }

      &::after {
        top: auto;
        bottom: 0;
      }

      /**
      * Hover and Active States
      */
      &:hover,
      &.woowgallery-active {
        text-decoration: none;
        color: #444;
        background-color: #fafafa;

        .dashicons {
          color: #444;
        }

        &::before,
        &::after {
          transform: scaleX(1);
        }
      }

      &.woowgallery-active {
        border-right: 1px solid $white;
        background-color: $white;
      }
    }
  }
}

#woowgallery-tabs {
  flex: 1 1 auto;
  padding: 0 12px;
  width: calc(100% - 160px);

  /**
  * All Tabs
  */
  .woowgallery-tab {
    padding: 10px;

    &:not(.woowgallery-active) {
      display: none;
    }
  }

  /**
  * Full width textareas
  */
  textarea {
    width: 100%;
  }

  input[type="text"] {
    width: 100%;
    max-width: 500px;
  }
}