@main_title_text_color: #111;

@secondary_text_color: hsl(210, 27%, 20%);
@secondary_hl_text_color: hsl(210, 27%, 5%);
@secondary_color: hsl(210, 27%, 90%);
@secondary_border_color: hsl(210, 27%, 70%);

@main_text_color: hsl(210, 10%, 10%);
@main_hl_text_color: hsl(210, 10%, 5%);
@main_color: hsl(210, 20%, 99%);
@main_border_color: hsl(210, 10%, 70%);

@actions_color: #f1f1f1;
@actions_text_color: hsl(210, 30%, 25%);

@header_color: #666;
@header_text_color: #ffffff;

@selection_color: @brand-primary;
@hover_color: hsl(210, 10%, 50%);

@add_bg_color: hsl(110, 25%, 85%);


@browser-bg: #f9f9f9;
@column-bg: #fefefe;
@column-text-color: #000;

.btn-group-multiple-selection {
  display: none;
  padding: 3px;
}
.multiple-selection {
  min-height: 220px;
  .btn-group-multiple-selection {
    display: block;
  }
}

#xtro-top {
  .position-leader-label {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: lighten(@column-text-color, 10%);
    background: darken(@browser-bg, 7%);
    padding: 3px 2px;
  }
}

div.column-browser,
div.columns-container {
  img.user-managed {
    display: inline;
  }
  background: @browser-bg;
  overflow: hidden;
  position: relative;
  font-size: 16px;
  position: relative;
  overflow: visible;
  @media all and (min-width: @screen-md-min) {
    font-size: 13px;
  }
  .xt-column {
    resize: horizontal;
    min-width: 80px;
    background: @column-bg;
    padding-bottom: 8px;
    margin: 0;
    display: block;
    @media all and (max-width: 768px) {
      width: 100% !important;
    }
    height: calc(100% - 7px);
    overflow: auto;
    border-right: 1px solid darken(@browser-bg, 5%);
  }
  .xtcontainer-group > a {
    border-top: 1px solid darken(@browser-bg, 5%);
  }
  .xtcontainer-group > a:first-child {
    border-top: none;
  }
  .xt-container-group-main {
    background: lighten(@browser-bg, 2.5%);
  }
  .xt-column {
    position: relative;
    .xt-column-actions > a {
      cursor: pointer;
      line-height: 24px;
    }
    .xt-column-actions {
      position: relative;
      background-color: var(--brand-secondary-lighter);
      line-height: 24px;
      z-index: 89;
      user-select: none;
      * {
        user-select: none;
      }
      > ul {
        background-color: var(--brand-secondary-lighter);
        padding: 0;
        margin: 0;
        list-style-type: none;
        z-index: 89;
        display: none;
        border-bottom: 1px solid #ddd;

        > li {
          margin: 0;
          padding: 0 3px;
          &:hover {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            a {
              color: #fff;
            }
          }
        }
      }
      .hidden-on-active {
        transition: transform 0.2s;
      }
      &.active {
        > ul {
          display: block;
        }
        .hidden-on-active {
          transform: rotate(90deg);
        }
      }
    }
  }
  .xt-column {
    a {
      display: flex;
      padding: 0 3px;
      position: relative;
      color: @column-text-color;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      line-height: 32px;
      > span {
        display: block;
      }
      .container-icon {
        padding-right: 4px;
      }
      .sort-handle {
        padding-right: 4px;
      }
      .text-content {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        .text-overflow;
      }
      @media all and (min-width: @screen-md-min) {
        line-height: 24px;
      }
      &:active {
        //background-color: lighten(@selection_color, 35%);
        filter:brightness(35%);
      }
    }
    .inPath {
      background-color: var(--brand-primary);
      opacity: .4;
      color: #fff;
    }
    .alias-container{
    	font-style: italic;
    }
    .template {
      display: none;
    }
    .template-selected,
    .template,
    .template-in-path {
      font-weight: bold;
    }
    .template {
      color: var(--brand-primary);
    }
    .sortable-placeholder {
      height: 22px;
      background: desaturate(lighten(@selection_color, 35%), 50%);
    }

    .not-published {
      font-style: italic;
      font-weight: normal;
      color: lighten(@column-text-color, 30%);
      opacity:.7;
    }

    .not-published.selected {
      font-style: italic;
      font-weight: normal;
    }

    .not-published-current-lang {
      font-style: italic;
      font-weight: normal;
      color: #999;
    }

    .not-published-current-lang.selected {
      font-style: italic;
      font-weight: normal;
    }
    .selected,
    .ui-draggable-dragging {
      color: #fff;
      background-color: var(--brand-primary);
    }
    .selection {
      color: #fff;
      background-color: spin(@selection_color, 170);
    }

    .droppable-hover {
      background: #666;
      color: #fff;
    }
  }
  div.ui-resizable-s,
  div.south-handle {
    clear: both;
    cursor: s-resize;
    height: 7px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    border-top: 1px solid #aaa;
    z-index: 1000;
    position: absolute;
    background: #f1f1f1;
    //#gradient > .vertical(@main_color,#ddd);

    display: block;
    float: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 0;
    border-left: 0;
    bottom: 0;
  }
}

div.columns-container {
  height: auto;
  background: transparent;
  border: 1px solid #e1e1e1;
  .padding {
    padding: 0;
  }
  .xt-column {
    width: 100% !important;
    border: none;
    resize: horizontal;
  }
  .position-leader-label {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: #1a1a1a;
    background: #e7e7e7;
    padding: 3px 2px;
  }
}

.xt-hideable-area {
  /*padding-bottom: 10px;
	overflow-y: scroll;*/
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}

#add-actions-link,
#add-multiple-file-link {
  display: inline-block;
  @media all and (min-width: @screen-md-min) {
    display: block;
  }
  text-decoration: none;
}

div.xt-containers-menu {
  .position-leader-label {
    font-size: 11px;
    padding-top: 15px;
    color: #444;
  }

  background: rgba(255, 255, 255, 0.3);
  margin: 10px 0;
  padding: 10px;

  a {
    font-size: 13px;
    display: block;
    text-decoration: none;
    color: #000;
    padding: 3px 0;
    border-top: 1px solid #b8b8b8;
    &:hover {
      color: @brand-primary;
    }
    &.to-parent {
      border-top: none;
      font-weight: bold;
    }
    &.not-published {
      color: #777;
      font-style: italic;
    }
    &.selected {
      color: @brand-primary;
    }
  }
}

.column-browser {
  .slick,
  .slick-list,
  .slick-track {
    height: 100%;
  }
}