//
// Collection
// A list of items that can be arranged as vertical list, horizontal toolbar or a grid.
//

@collection-item-padding: @pad-xs @pad-sm;
@collection-item-separator-color: @tinymce-separator-color;
@collection-item-separator-margin-y: @pad-xs;
@collection-item-radius: @toolbar-button-border-radius;

@collection-item-label-font-size: @font-size-sm;
@collection-item-label-font-style: normal;
@collection-item-label-font-weight: @font-weight-normal;
@collection-item-label-text-color: @text-color;
@collection-item-label-text-transform: none;

@collection-item-label-disabled-text-color: fade(@collection-item-label-text-color, 50%);
@collection-item-caret-disabled-text-color: fade(@collection-item-label-text-color, 50%);

@collection-list-item-active-background-color: @toolbar-button-hover-background-color;
@collection-list-item-label-active-text-color: contrast(@collection-list-item-active-background-color, @color-black, @color-white);
@collection-list-item-enabled-background-color: @menu-background-color;
@collection-list-item-label-enabled-text-color: contrast(@collection-list-item-enabled-background-color, @color-black, @color-white);

@collection-toolbar-item-active-background-color: @toolbar-button-hover-background-color;
@collection-toolbar-item-label-active-text-color: contrast(@collection-toolbar-item-active-background-color, @color-black, @color-white);
@collection-toolbar-item-enabled-background-color: @toolbar-button-enabled-background-color;
@collection-toolbar-item-label-enabled-text-color: contrast(@collection-toolbar-item-enabled-background-color, @color-black, @color-white);

@collection-grid-item-active-background-color: @toolbar-button-hover-background-color;
@collection-grid-item-label-active-text-color: contrast(@collection-grid-item-active-background-color, @color-black, @color-white);
@collection-grid-item-enabled-background-color: @toolbar-button-enabled-background-color;
@collection-grid-item-label-enabled-text-color: contrast(@collection-grid-item-enabled-background-color, @color-black, @color-white);

@collection-item-list-icon-height: 24px;
@collection-item-list-icon-width: 24px;

@collection-item-list-image-radius: 50%;

@collection-group-label-background-color: lighten(@collection-item-separator-color, 10%);
@collection-group-label-font-size: @font-size-xs;
@collection-group-label-font-style: normal;
@collection-group-label-font-weight: @font-weight-normal;
@collection-group-label-text-color:contrast(@collection-group-label-background-color, @text-color-muted, @color-white);
@collection-group-label-text-transform: none;

@collection-horizontal-border-radius: @panel-border-radius;

.tox {
  .tox-collection {
    //
  }

  .tox-collection--list {
    //
  }

  .tox-collection--toolbar {
    //
  }

  .tox-collection--grid {
    //
  }

  .tox-collection--toolbar .tox-collection__group {
    display: flex;
    padding: 0;
  }

  .tox-collection--grid .tox-collection__group {
    display: flex;
    flex-wrap: wrap;
    max-height: (32px * 6) + (32px / 2);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
  }

  .tox-collection--list .tox-collection__group {
    border-bottom-width: 0;
    border-color: @collection-item-separator-color;
    border-left-width: 0;
    border-right-width: 0;
    border-style: solid;
    border-top-width: 1px;
    padding: @collection-item-separator-margin-y 0;

    &:first-child {
      border-top-width: 0;
    }
  }

  // Group headings should only be used on collection lists.
  .tox-collection__group-heading {
    background-color: @collection-group-label-background-color;
    color: @collection-group-label-text-color;
    cursor: default;
    font-size: @collection-group-label-font-size;
    font-style: @collection-group-label-font-style;
    font-weight: @collection-group-label-font-weight;
    margin-bottom: @collection-item-separator-margin-y;
    margin-top: -@collection-item-separator-margin-y;
    padding: @collection-item-padding;
    text-transform: @collection-group-label-text-transform;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .tox-collection__item {
    align-items: center;
    border-radius: @collection-item-radius;
    color: @collection-item-label-text-color;
    display: flex;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .tox-collection--list .tox-collection__item {
    padding: @collection-item-padding;
  }

  .tox-collection--toolbar .tox-collection__item {
    border-radius: @toolbar-button-border-radius;
    padding: @pad-xs;
  }

  .tox-collection--grid .tox-collection__item {
    border-radius: @toolbar-button-border-radius;
    padding: @pad-xs;
  }

  // Note: Ensure "enabled" is before "active", as active styles should have a higher precedence
  .tox-collection--list .tox-collection__item--enabled {
    background-color: @collection-list-item-enabled-background-color;
    color: @collection-list-item-label-enabled-text-color;
  }

  .tox-collection--list .tox-collection__item--active {
    background-color: @collection-list-item-active-background-color;
  }

  .tox-collection--toolbar .tox-collection__item--enabled {
    background-color: @collection-toolbar-item-enabled-background-color;
    color: @collection-toolbar-item-label-enabled-text-color;
  }

  .tox-collection--toolbar .tox-collection__item--active {
    background-color: @collection-toolbar-item-active-background-color;
  }

  .tox-collection--grid .tox-collection__item--enabled {
    background-color: @collection-grid-item-enabled-background-color;
    color: @collection-grid-item-label-enabled-text-color;
  }

  .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    background-color: @collection-grid-item-active-background-color;
    color: @collection-grid-item-label-active-text-color;
  }

  .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    color: @collection-list-item-label-active-text-color;
  }

  .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    color: @collection-toolbar-item-label-active-text-color;
  }

  .tox-collection__item-icon,
  .tox-collection__item-checkmark {
    align-items: center;
    display: flex;
    height: @collection-item-list-icon-height;
    justify-content: center;
    width: @collection-item-list-icon-width;

    svg {
      fill: currentColor;
    }
  }

  .tox-collection--toolbar-lg .tox-collection__item-icon {
    height: @collection-item-list-icon-height * 2;
    width: @collection-item-list-icon-width * 2;
  }

  .tox-collection__item-label {
    color: currentColor;
    display: inline-block;
    flex: 1;
    font-size: @collection-item-label-font-size;
    font-style: @collection-item-label-font-style;
    font-weight: @collection-item-label-font-weight;
    line-height: @collection-item-list-icon-height;
    text-transform: @collection-item-label-text-transform;
    word-break: break-all;
  }

  .tox-collection__item-accessory {
    color: @text-color-muted;
    display: inline-block;
    font-size: @font-size-sm;
    height: @collection-item-list-icon-height;
    line-height: @collection-item-list-icon-height;
    text-transform: none;
  }

  .tox-collection__item-caret {
    align-items: center;
    display: flex;
    min-height: @collection-item-list-icon-height;

    // Workaround for the above not centering items in IE11. See https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042
    &::after {
      content: '';
      font-size: 0;
      min-height: inherit;
    }

    svg {
      fill: @collection-item-label-text-color;
    }
  }

  // Disabled item
  .tox-collection__item--state-disabled {
    background-color: transparent;
    color: @collection-item-label-disabled-text-color;
    cursor: not-allowed;

    .tox-collection__item-caret svg {
      fill: @collection-item-caret-disabled-text-color;
    }
  }

  // Tickable items that are not ticked hide the check mark SVG (not the entire icon so there is still a gap)
  .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
    display: none;
  }

  // Tickable items that are not ticked and have an adjacent shortcut hide the check mark completely (gap is removed)
  .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark {
    display: none;
  }

  .tox-collection--horizontal {
    background-color: @menu-background-color;
    border: 1px solid @collection-item-separator-color;
    border-radius: @collection-horizontal-border-radius;
    box-shadow: @pop-box-shadow;
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    margin-bottom: 0;
    overflow-x: auto;
    padding: 0;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .tox-collection--horizontal .tox-collection__group {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0 @pad-xs;
  }

  .tox-collection--horizontal .tox-collection__item {
    height: @toolbar-button-height; // 28px
    margin: (@toolbar-button-spacing-y + 1px) @toolbar-button-spacing-x @toolbar-button-spacing-y 0; // 4px 0 3px 0
    padding: 0 4px;
  }

  .tox-collection--horizontal .tox-collection__item-label {
    white-space: nowrap;
  }

  .tox-collection--horizontal .tox-collection__item-caret {
    margin-left: 4px;
  }

  .tox-collection__item-container {
    display: flex;
  }

  .tox-collection__item-container--row {
    align-items: center;
    flex: 1 1 auto;
    flex-direction: row;

    &.tox-collection__item-container--align-left {
      margin-right: auto;
    }

    &.tox-collection__item-container--align-right {
      justify-content: flex-end;
      margin-left: auto;
    }

    &.tox-collection__item-container--valign-top {
      align-items: flex-start;
      margin-bottom: auto;
    }

    &.tox-collection__item-container--valign-middle {
      align-items: center;
    }

    &.tox-collection__item-container--valign-bottom {
      align-items: flex-end;
      margin-top: auto;
    }
  }

  .tox-collection__item-container--column {
    align-self: center;
    flex: 1 1 auto;
    flex-direction: column;

    &.tox-collection__item-container--align-left {
      align-items: flex-start;
    }

    &.tox-collection__item-container--align-right {
      align-items: flex-end;
    }

    &.tox-collection__item-container--valign-top {
      align-self: flex-start;
    }

    &.tox-collection__item-container--valign-middle {
      align-self: center;
    }

    &.tox-collection__item-container--valign-bottom {
      align-self: flex-end;
    }
  }
}

.tox:not([dir=rtl]) {
  .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
    border-right: 1px solid @toolbar-group-separator-color;
  }

  // Make a space between all elements within a list item
  .tox-collection--list .tox-collection__item > *:not(:first-child) {
    margin-left: @pad-sm;
  }

  // Create a slight padding for lists containing no icons
  .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
    margin-left: @pad-xs;
  }

  .tox-collection__item-accessory {
    margin-left: @pad-md;
    text-align: right;
  }

  .tox-collection .tox-collection__item-caret {
    margin-left: @pad-md;
  }
}

// RTL
.tox[dir=rtl] {
  .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
    border-left: 1px solid @toolbar-group-separator-color;
  }

  // Make a space between all elements within a list item
  .tox-collection--list .tox-collection__item > *:not(:first-child) {
    margin-right: @pad-sm;
  }

  // Create a slight padding for lists containing no icons
  .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
    margin-right: @pad-xs;
  }

  .tox-collection__item-accessory {
    margin-right: @pad-md;
    text-align: left;
  }

  .tox-collection .tox-collection__item-caret {
    margin-right: @pad-md;
    transform: rotateY(180deg);
  }

  .tox-collection--horizontal .tox-collection__item-caret {
    margin-right: 4px;
  }
}