@import "../base/mixins";
$dp-column-first-width:    220px;
$dp-column-padding:        12px;
$dp-column-heading-height: 44px;
$dp-column-drawer-height:  36px;
$dp-column-item-height:    24px;

// Column
//
.dp-column {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
  border: 1px solid $dp-greyscale-300;
  background-color: $dp-greyscale-150;

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

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

  & > .dp-heading {
    @include no-text-select();
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 $dp-column-padding;
    line-height: $dp-column-heading-height;
    border-bottom: 1px solid $dp-greyscale-300;
    font-family: $primary-font;
    font-size: $font-size-l;
    font-weight: $pf-bold;
    color: $dp-greyscale-850;

    .dp-icon {
      margin-right: 10px;
      margin-bottom: 2px;
      padding-right: 0;
      font-size: $icon-size-m;
    }
  }
}

// Drawers
//
.dp-column-drawer-list {
  margin: 0;
}

.dp-column-drawer {
  border-bottom: 1px solid $dp-greyscale-300;

  & > .dp-heading {
    @include no-text-select();
    flex: 1;
    margin: 0;
    padding: 0 $dp-column-padding;
    line-height: $dp-column-drawer-height;
    text-transform: uppercase;
    font-family: $primary-font;
    font-size: $font-size-m;
    font-weight: $pf-bold;
    color: $dp-greyscale-850;

    .dp-heading__count {
      order: 1;
      font-weight: normal;
      padding-left: 0.25em;
    }

    .dp-column-drawer__arrow {
      order: 2;
      flex-grow: 1;
      cursor: pointer;
      text-align: right;
      padding-right: 0;
    }
  }

  & .dp-subheading {
    margin: 0 0 4px 0;
    text-transform: uppercase;
    padding: 0 $dp-column-padding;
    font-family: $primary-font;
    font-size: $font-size-m;
    line-height: $font-size-m;
    font-weight: $pf-semi-bold;
    color: $dp-greyscale-700;
  }
}

.dp-column-drawer--with-controls {
  .dp-column-drawer__arrow {
    flex-grow: 0 !important;
    padding-left: 0.5rem !important;
  }
}

.dp-column-drawer__body {
  display: none;
  padding-bottom: 6px;
}

.dp-column-drawer__body--opened {
  display: block;
}

// Items
//
.dp-drawer-item-list {
  padding-left: 0 !important;
  list-style-type: none;

  & .dp-column-item:last-child {
    margin-bottom: 6px;
  }

  & > .dp-column-drawer {
    border-bottom: 0;
  }

  ul.dp-list {
    padding-left: 0;

    .dp-drawer-item__pos-left {
      margin-left: 6px;
    }
  }
}

.dp-drawer-item {
  @include no-text-select();
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding-left: $dp-column-padding;
  padding-right: $dp-column-padding;
  line-height: $dp-column-item-height;
  font-family: $primary-font;
  font-size: $font-size-m;
  font-weight: $pf-regular;
  color: $dp-greyscale-700;

  &:hover {
    color: $dp-sonic-primary;
    background-color: $dp-morning-sky;
  }

  .dp-icon,
  .dp-avatar {
    display: inline-block;
    vertical-align: middle;
  }

  .dp-avatar {
    margin-right: 6px;
    margin-bottom: 2px;
    height: $icon-size-s;
    width: $icon-size-s;
  }

  .dp-urgency {
    @include border-radius("m");
    font-family: $primary-font;
    font-size: $font-size-s;
    line-height: $font-size-s;
    padding: 2px;
    min-width: 1.75em;
  }
}

.dp-drawer-item__pos-left {
  order: 1;
  text-align: left;

  .dp-icon {
    font-size: $icon-size-s;
    margin-right: 8px;
  }
}

.dp-drawer-item__pos-middle {
  order: 2;
  flex-grow: 2;
  text-align: left;

  .dp-icon {
    margin-left: 0.25em;
  }
}

.dp-drawer-item__pos-right {
  order: 3;
  display: flex;
  text-align: right;
  font-family: $primary-font;
  font-size: $font-size-m;
  font-weight: $pf-semi-bold;
  color: $dp-greyscale-850;

  & > * {
    margin-left: 0.25em;
  }
}

.dp-drawer-item--selected {
  margin-left: ($dp-column-padding / 2);
  margin-right: ($dp-column-padding / 2);
  padding-left: ($dp-column-padding / 2);
  padding-right: ($dp-column-padding / 2);
  border-radius: $rad-size-m-l;
  background-color: $dp-sonic-primary;

  &:hover {
    background-color: $dp-sonic-primary;
  }

  .dp-drawer-item__pos-middle {
    font-weight: $pf-semi-bold;
    color: $dp-greyscale-00;
  }

  .dp-drawer-item__pos-right {
    color: $dp-greyscale-00;
  }

  .dp-icon__filter {
    color: $dp-greyscale-00;
  }
}

/// First column
.dp-column__first {
  width: $dp-column-first-width;
}