.side-stroke(
@hover-color: @link-color;
@active-color: @brand-primary;
@padding: @grid-gutter-width * 0.5;
) {
  padding-left: (@padding - 5px);
  padding-right: (@padding - 5px);
  margin-left: 2px;
  margin-right: 5px;
  border: 3px solid transparent;
  border-width: 0 0 0 3px;
  transition: border-color 0.218s linear;

  &.active,
  &.active:hover {
    border-color: @active-color;
  }

  &:hover {
    border-color: @hover-color;
  }
}

.column-list-item-colors(
@base-color: @text-color;
@active-color: @gray-base;
@active-link-color: @link-color;
@active-link-hover-color: @link-hover-color;
) {
  color: @base-color;
  transition: color 0.218s ease;

  h4 a {
    color: @base-color;
    transition: color 0.218s ease;
  }

  &.active,
  &:hover,
  &:focus {
    color: @active-color;

    h4 a {
      color: @active-link-color;

      &:hover,
      &:focus {
        color: @active-link-hover-color;
      }
    }
  }
}

.column-list-item() {
  margin-bottom: @padding-base-vertical;

  h4 {
    word-wrap: break-word;
  }

  .side-stroke();

  .column-list-item-colors(@gray, @gray-base, @gray-base, @gray-base);
}

.first-column-list() {
  list-style: none;
  overflow: visible;
  padding: 0;
  margin: 0;

  &:focus {
    outline: none;
  }
}

.first-column-list-item() {
  h4 {
    font-size: 16px;
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.second-column-list() {
  &:focus,
  ul:focus,
  ol:focus {
    outline: none;
  }
}

.second-column-list-item() {
  padding-top: 8px;
  padding-bottom: 8px;
}

.three-cols-layout-base() {
  // S- (vertical layout)

  .site-wrap {
    .abs-box(0, 0, 0, 0);

    z-index: 2;

    > .navbar {
      z-index: 2;
    }
  }

  .column .three-cols-layout-cell.content {
    padding-top: @grid-gutter-width * 0.5;
  }

  .column-right .three-cols-layout-cell.content {
    padding: (@grid-gutter-width * 0.5);
  }

  .page-wrap,
  .three-cols-layout-columns,
  .column {
    .abs-box();
  }

  .page-wrap {
    z-index: 1;
    top: @navbar-height + @ce-banner-height;
    bottom: @footer-height;
  }

  .three-cols-layout-columns {
    overflow: hidden;

    > .column {
      position: absolute;
      width: auto;
      min-height: auto;
      transition:
        left @layout-transition-duration @layout-transition-timing,
        right @layout-transition-duration @layout-transition-timing,
        margin-left @layout-transition-duration @layout-transition-timing,
        margin-right @layout-transition-duration @layout-transition-timing;
    }

    .three-cols-layout-cell {
      z-index: 1;
      position: absolute;
      top: (@column-top-height + (@padding-base-vertical * 2));
      bottom: 0;
      left: 0;
      right: 0;

      &.content {
        transition: opacity @layout-transition-duration @layout-transition-timing;
        overflow-x: hidden;
        overflow-y: auto;
      }

      &.top {
        z-index: 2;
        top: 0;
        bottom: auto;
        overflow: visible;
        margin: 0;

        > *:last-child {
          float: right;
        }
      }
    }
  }
}

.three-cols-layout-handheld() {
  body {
    overflow: auto;
    min-height: 100vh;
  }

  .site-wrap {
    position: static;
    overflow: visible;
  }

  .page-wrap {
    overflow: auto;
  }

  .three-cols-layout-columns {
    position: relative;

    > .column {
      border-width: 1px 0 0 0;
      overflow: hidden;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;

      > .three-cols-layout-cell {
        position: relative;
      }
    }
  }

  .column > .three-cols-layout-cell.content {
    position: static;
    padding-top: (@grid-gutter-width * 0.5);
    padding-bottom: (@grid-gutter-width * 0.5);
  }
}

.three-cols-layout(@left-width: 200px, @center-width: 300px) {
  .three-cols-layout {
    height: ~"calc(100vh - (@{header-height} + @{footer-height}))";
    width: 100vw;
    overflow: hidden;
  }

  .three-cols-layout-columns {
    position: absolute;

    > .column {
      position: absolute;
      width: auto;
      min-height: auto;
    }

    .column-left {
      z-index: 3;
      width: @left-width;
    }

    .column-center {
      z-index: 2;
      left: @left-width;
      margin-right: (0 - @center-width);
      width: @center-width;
    }

    .column-right {
      z-index: 1;
      left: (@left-width + @center-width);
      margin-left: 0;
    }
  }
}

.three-cols-layout-states(@left-width: 200px, @center-width: 300px) {
  .filters-column-close {
    .column.task-filters {
      left: (0 - (@left-width - @grid-gutter-width));
    }

    .column.tasks-list {
      left: @grid-gutter-width;
      margin-right: (0 - (@center-width + (@grid-gutter-width * 1)));
    }

    .column.task-details {
      left: (@center-width + @grid-gutter-width);
    }

    &.task-column-close {
      .column.tasks-list {
        right: 30px;
        margin: 0;
      }
    }

    &.list-column-close {
      .column.tasks-list {
        left: (0 - (@center-width - (@grid-gutter-width * 2)));
        right: 100%;
        margin-right: (0 - (@grid-gutter-width * 2));
      }

      .column.task-details {
        left: @grid-gutter-width * 2;
      }
    }
  }

  .list-column-close {
    .column.tasks-list {
      left: (0 - (@left-width / 2));
      right: 100%;
      margin-right: (0 - (@left-width + (@grid-gutter-width * 1)));
    }

    .column.task-details {
      left: (@left-width + @grid-gutter-width);
    }
  }

  .task-column-close {
    .column.tasks-list {
      right: @grid-gutter-width;
      margin: 0;
      width: auto;
    }

    .column.task-details {
      right: (0 - (@center-width - @grid-gutter-width));
      left: 100%;
      margin-left: (0 - @grid-gutter-width);
    }
  }
}

.three-cols-layout-colors(@left, @center, @right) {
  .three-cols-layout-columns,
  .column-right {
    color: @gray-dark;
  }

  .active {
    color: @gray-base;
  }

  .column {
    background-color: @body-bg;
    overflow: hidden;
    border: none;
    box-shadow: @box-shadow;

    .three-cols-layout-cell.top {
      border: none;
      background-color: @custom-gray-lighter;
      box-shadow: @box-shadow-lower;
    }
  }

  .column-right {
    border-right: none;
  }

  .three-cols-layout-cell.top {
    > a,
    > button,
    > .btn-link,
    .task-actions view > a,
    .sorting-choice > li > a,
    [cam-deployments-sorting-choices] > .dropdown > a {
      color: @navbar-default-link-color;

      &:hover,
      &:focus {
        text-decoration: none;
        color: @navbar-default-link-hover-color;
      }

      &:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
      }
    }

    > button {
      .icon-bar {
        background-color: @navbar-default-link-color;
      }

      &:hover,
      &:focus {
        .icon-bar {
          background-color: @navbar-default-link-hover-color;
        }
      }
    }
  }
}

.three-cols-layout-header() {
  .three-cols-layout-cell.top {
    min-height: (@column-top-height + (@padding-base-vertical * 2) + @border-thin-width);
    padding: calc(@padding-base-vertical + 2px) (@grid-gutter-width * 0.5) calc(@padding-base-vertical - 2px) (@grid-gutter-width * 0.5);
    margin:
      (0 - (@grid-gutter-width * 0.5))
      (0 - (@grid-gutter-width * 0.5))
      (@grid-gutter-width * 0.5)
      (0 - (@grid-gutter-width * 0.5));

    > button,
    > div {
      float: left;
      vertical-align: middle;
      margin-top: 0;
      margin-bottom: 0;
      padding: 0;
      height: @column-top-height;
      line-height: @column-top-height;
    }
  }
}
