/********************************************
* Defines the styles for .ss-ui-action-tabset:
* * Site tree action tabs (to perform actions on the site tree)
* * Actions menu (Edit page actions)
*
* Reliant on TabSet.js to apply and remove some classes.
*
* Note: This is a special use case of tabs, so the default tab
* styling should not apply
*
**********************************************/


$border: 1px solid darken(#D9D9D9, 15%);

.cms {
  .ss-ui-action-tabset{
    position:relative;
    display: inline-block;
    vertical-align: middle;

    /*
      Styles for the tab-nav of the site tree implementation
      of ss-ui-action-tabset
    */
    // Classes applied by javascript
    &.tabset-open {
      ul.ui-tabs-nav,
      ul.ui-tabs-nav li.first {
        border-bottom-left-radius: 0;
      }
    }
    &.tabset-open-last {
      ul.ui-tabs-nav li.last {
        border-bottom-right-radius: 0;
      }
    }

    /* Styles for the cms-actions in tree view, to use more limited space.
    Title hidden in tree view, until hover/active state added. Active is applied
    to the first tab within the template, so there should always be one title
    visible. Added and removed with js in TabSet.js  */
    .cms-tree-view-sidebar{
      min-width: 176px; /* for when the scrollbar is present & find dropdown open */
      .ss-ui-action-tabset{
        ul.ui-tabs-nav{
          >li{
            width: auto;
            a.tab-nav-link{
              box-sizing: border-box;
              transition-duration: .5s;
              overflow:hidden;
              padding-right:0;
              width:30px;
              &.active{
                transition-duration: .5s;
                width:110px;
              }
            }
          }
        }
        &.tabset-open, &.tabset-open-last {
          ul.ui-tabs-nav,
          ul.ui-tabs-nav li.first,
          ul.ui-tabs-nav li.last {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }
    }

    /****************************************************************
      Styles for the actions-menu implementation
      of ss-ui-action-tabset
    ****************************************************************/
    &.action-menus.ss-tabset {

      //Style the tabs naivgation
      ul.ui-tabs-nav{
        margin: 0;
        float: left; /* needed for ie but doesnt effect other browsers */
        border-bottom: 0;

        li{
          background: none;
          border: none;
          border-bottom: none !important; //over-ride jquery-ui style (which also has important)
          display: inline;
          padding: 0;
          &:hover, &:active{
            box-shadow: none;
            outline:none;
          }
          a{
            color: $link-color;
            font-size: 13px;
            font-weight: normal;
            line-height: 24px;
            padding:0 25px 0 10px;
            border-bottom: 0;
            margin: 0;

            &:hover, &:active{
              box-shadow: none;
              outline:none;
            }
            &:hover{
              color: $link-hover-color;
            }
            /* Arrow */
            &:after {
              @include icon-sprites(32x32);
              @include sprite($sprites-32x32-arrow_down_lighter, inline-block);

              border-bottom: 0;
              content: "";
              height: 16px;
              margin-left: 6px;
              width: 16px;
            }
            &:hover:after {
              @include icon-sprites(32x32);
              @include sprite($sprites-32x32-arrow_down_darker, inline-block);
            }
          }
          /* Make arrow point in up when nav open */
          &.ui-state-active a {
            &:after {
              @include icon-sprites(32x32);
              @include sprite($sprites-32x32-arrow_up_lighter, inline-block);
            }
            &:hover:after {
              @include icon-sprites(32x32);
              @include sprite($sprites-32x32-arrow_up_darker, inline-block);
            }
          }
        }
      }
      /* Style the panel for actions-menu */
      .ui-tabs-panel {
        @include clearfix;
        border-top-radius: 3px;
        border-bottom-radius: 0;
        @include tightSpacing;
        clear:both;
        display:block;
        background-color: $body-bg;
        border:1px solid #ccc;
        border-bottom:1px solid $body-bg;
        margin:0;
        margin-top:2px;
        max-width:250px;
        padding: 8px 0 2px;
        position:absolute;
        z-index:1;
        min-width: 190px;

        //Styles for the information displayed in popup above the main action buttons
        .cms-sitetree-information {
          border-bottom: 1px solid $border-color-light;
          margin-bottom: 8px;
          padding: 0 20px 0 0;
          margin-right: 10px;
          margin-left: 10px;
          p.meta-info {
            color: #999;
            font-size: 11px;
            line-height: 16px;
            margin-bottom: 8px;
            white-space: nowrap;
          }
        }

        .btn {
          width: 100%;
          text-align: left;
          border-radius: 0;
        }

        button {
          border-radius: 0;
          background: none;
          border: none;
          color: $link-color;
          display: block;
          font-weight:normal;
          margin:0;
          outline:none;
          padding-left:10px;
          padding-right:10px;
          text-align: left;
          text-shadow: none;
          white-space:normal;
          &.ss-ui-action-destructive{
            color: darken($color-error,25%);
          }
          span{
            padding-left:0;
            padding-right:0;
          }
          &:hover, &:focus, &:active{
            box-shadow: none;
            outline: none;
            background: none;
            border: none;
          }
          &.loading {
            background: transparent url('../../images/network-save.gif') no-repeat map_get($spacers, 2) center;
            .ui-button-text {
              padding-left: calc($spacer * 1.25);
            }
          }
        }
      }
    }
  }
}