/* PivotTable */
.smart-pivot-table {
  thead {
    th {
      font-weight: bold;

      &:not(:last-child):not(.last-visible) {
        border-right: var(--smart-border-width) solid var(--smart-border);
      }
    }
  }

  tbody {
    tr {
      td {
        transform: scaleY(1);
      }

      &.collapsed {
        height: 0;

        td {
          border-top-width: 0;
          border-top-color: transparent;
          padding-top: 0;
          padding-bottom: 0;
          line-height: 0;
          transform: scaleY(0);
        }
      }

      &.no-height td {
        line-height: 0;
      }
    }
  }

  th {
    &.align-left>.wrapper {
      justify-content: flex-start;
    }

    &.align-center>.wrapper {
      justify-content: center;
    }

    &.align-right>.wrapper {
      justify-content: flex-end;
    }
  }

  tr {
    td {
      line-height: calc(var(--smart-table-row-height) - 2 * var(--smart-table-cell-padding) - var(--smart-border-width));
      white-space: nowrap;
    }

    &:last-child:not(:first-child) {

      .smart-pivot-table-grouping-header,
      .smart-pivot-table-total-header {
        border-top: var(--smart-border-width) solid var(--smart-border);
      }
    }

    &:not(:last-child) {

      .smart-pivot-table-grouping-header,
      .smart-pivot-table-selection-header,
      .smart-pivot-table-total-header {
        border-bottom: none;
      }
    }
  }

  td {
    &.align-left {
      text-align: left;
    }

    &.align-center {
      text-align: center;
    }

    &.align-right {
      text-align: right;
    }

    &.sort-by {
      position: relative;

      &:before {
        content: var(--smart-icon-up);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        visibility: hidden;
        position: absolute;
        top: 0;
        right: var(--smart-table-cell-padding);
        height: 100%;
        font-family: var(--smart-font-family-icon);
        opacity: 0;
        transform: rotate(90deg);
      }

      &.asc,
      &.desc {
        &:before {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    &[selection-detail] {
      &:before {
        content: attr(selection-detail);
        position: absolute;
        top: 100%;
        left: 0;
        padding: 3px;
        background-color: var(--smart-secondary);
        color: var(--smart-secondary-color);
        font-size: var(--smart-font-size);
        font-variant: small-caps;
        opacity: 0.8;
        pointer-events: none;
      }

      &[detail-position-x="right"] {
        &:before {
          left: unset;
          right: 0;
        }
      }

      &[detail-position-y="top"] {
        &:before {
          top: 0;
          transform: translateY(-100%);
        }
      }
    }
  }

  tfoot {
    td {
      font-weight: bold;
    }
  }

  .smart-pivot-table-main-container {
    width: 100%;
    height: 100%;
    overflow: auto;

    &.prevent-scroll {
      overflow: hidden;
    }
  }

  .smart-pivot-table-selection-header {
    border-top: none;
  }

  .smart-pivot-table-total-header {
    border-top: none;
    width: var(--smart-pivot-table-cell-width);
  }

  .smart-pivot-table-grouping-header {
    border-top: none;
    width: var(--smart-pivot-table-secondary-group-width);
  }

  .smart-pivot-table-toolbar {
    display: none;
    border: none;
    border-bottom: var(--smart-border-width) solid var(--smart-border);
    height: var(--smart-table-row-height);

    smart-breadcrumb .smart-breadcrumb-items .smart-breadcrumb-item {
      height: calc(100% - var(--smart-breadcrumb-padding));
    }
  }

  .smart-pivot-table-row-group-breadcrumb {
    &:before {
      content: var(--smart-icon-align-left);
      transform: scale(-1);
    }
  }

  .smart-pivot-table-pivot-breadcrumb {
    border-left: var(--smart-border-width) solid var(--smart-border);
    border-radius: 0;

    &:before {
      content: var(--smart-icon-refresh);
    }
  }

  .empty {
    border-top: none;
  }

  .total-arrow {
    display: inline-flex;
    margin-left: var(--smart-table-arrow-margin);
    width: var(--smart-table-arrow-size);
    height: var(--smart-table-arrow-size);
    cursor: pointer;

    &:focus {
      outline: none;
      border: 1px solid var(--smart-ui-state-color-focus);
      border-radius: 50%;
      color: var(--smart-ui-state-color-focus);
    }
  }

  .smart-pivot-panel {
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    height: 100%;
  }

  smart-breadcrumb {
    position: relative;
    border: none;
    width: unset;
    height: 100%;
    padding-left: calc(3 * var(--smart-breadcrumb-padding));

    &:before {
      position: absolute;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(3 * var(--smart-breadcrumb-padding));
      height: 100%;
      font-family: var(--smart-font-family-icon);
    }

    >.smart-container {
      position: relative;

      &.drop-target {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: calc(-3 * var(--smart-breadcrumb-padding));
          box-sizing: border-box;
          border: 2px dashed var(--smart-primary);
          width: calc(100% + 4 * var(--smart-breadcrumb-padding));
          height: calc(100% + var(--smart-breadcrumb-padding));
        }
      }
    }

    .smart-template-container {
      height: 100%;
    }

    .smart-breadcrumb-items {
      height: 100%;
    }

    .smart-breadcrumb-item {
      height: calc(100% - var(--smart-breadcrumb-padding));
    }

    .smart-breadcrumb-placeholder {
      position: absolute;
      top: var(--smart-breadcrumb-padding);
      left: 0;
      font-style: italic;
    }
  }

  [selection-detail] {
    position: relative;
    overflow: visible;
    z-index: 1;
  }

  &:not([right-to-left]) {
    td.sort-by.desc::before {
      transform: rotate(270deg);
    }
  }

  &:not([animation="none"]) {
    tbody {
      tr {
        transition: height 0.2s ease-in-out;
      }
    }

    tr {
      td {
        transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out, transform 0.2s ease-in-out, border-top-color 0.2s ease-in-out;
      }
    }
  }

  &:not([designer]) {
    .smart-pivot-table-designer-container {
      display: none;
    }
  }

  &[group-layout="classic"] {
    .smart-pivot-table-grouping-header {
      width: calc(0.75 * var(--smart-pivot-table-cell-width));
    }

    tbody td:not(.expanded)+td[data-field^="group"]:not(.main),
    tbody td.expanded:not(.main)+td[data-field^="group"]:not(.main) {
      font-size: 0;
    }

    .hierarchy-arrow::after {
      content: var(--smart-icon-plus);
    }

    td {
      &.expanded {
        .hierarchy-arrow::after {
          content: var(--smart-icon-minus);
        }
      }
    }
  }

  &[designer] {
    >.smart-container {
      display: grid;
      grid-template-columns: 1fr var(--smart-pivot-panel-width);
      grid-template-rows: 100%;
    }

    .smart-pivot-table-designer-container {
      display: block;
      height: 100%;
    }
  }

  &[designer-position="near"] {
    >.smart-container {
      grid-template-columns: var(--smart-pivot-panel-width) 1fr;
    }

    .smart-pivot-table-main-container {
      order: 1;
    }

    &:not([right-to-left]) {
      .smart-pivot-panel {
        border-left: none;
        border-right: var(--smart-border-width) solid var(--smart-border);
      }
    }
  }

  &[toolbar] {
    >.smart-container {
      display: flex;
      flex-direction: column;
    }

    .smart-pivot-table-main-container {
      height: calc(100% - var(--smart-table-row-height));
      grid-area: main;
    }

    .smart-pivot-table-toolbar {
      display: grid;
      grid-template-columns: 1fr 1fr var(--smart-table-row-height) var(--smart-table-row-height);
      grid-area: toolbar;
      gap: var(--smart-pivot-panel-padding);
    }

    .smart-pivot-table-designer-container {
      grid-area: designer;
      min-height: 0;
      max-height: unset;
    }
  }

  &[toolbar][designer] {
    >.smart-container {
      display: grid;
      grid-template-columns: 1fr var(--smart-pivot-panel-width);
      grid-template-rows: var(--smart-table-row-height) 1fr;
      grid-template-areas:
        "toolbar toolbar"
        "main designer";
    }

    .smart-pivot-table-toolbar {
      grid-template-columns: 1fr 1fr var(--smart-table-row-height);
    }

    .smart-table-toolbar-button.fields {
      display: none;
    }

    .smart-pivot-table-main-container {
      width: 100%;
      height: 100%;
    }

    &[designer-position="near"] {
      >.smart-container {
        grid-template-columns: var(--smart-pivot-panel-width) 1fr;
        grid-template-areas:
          "toolbar toolbar"
          "designer main";
      }
    }
  }

  &[selection][selection-mode="cell"] {
    tbody {
      td {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;

        &.selected {
          background-color: #{'rgba(var(--smart-primary-rgb), 0.8)'};
          color: var(--smart-primary-color);
        }
      }
    }
  }
}

.smart-table {
  &[column-reorder] {
    th[data-field].smart-pivot-table-total-header {
      cursor: unset;
    }

    &[column-totals] {
      th[data-field] {
        cursor: unset;
      }
    }
  }

  &[freeze-header] {
    thead {
      tr:nth-child(4)>th {
        top: calc(3 * var(--smart-table-column-header-height));
      }

      tr:nth-child(5)>th {
        top: calc(4 * var(--smart-table-column-header-height));
      }

      tr:nth-child(6)>th {
        top: calc(5 * var(--smart-table-column-header-height));
      }

      tr:nth-child(7)>th {
        top: calc(6 * var(--smart-table-column-header-height));
      }

      tr:nth-child(8)>th {
        top: calc(7 * var(--smart-table-column-header-height));
      }

      tr:nth-child(9)>th {
        top: calc(8 * var(--smart-table-column-header-height));
      }

      tr:nth-child(10)>th {
        top: calc(9 * var(--smart-table-column-header-height));
      }
    }
  }
}

.smart-table-window {
  &.drill-down {
    --smart-window-default-width: 750px;
    --smart-window-footer-padding: 0;
    --smart-window-footer-height: 0px;

    .smart-content-container {
      >.smart-content>div {
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 100%;
        gap: var(--smart-pivot-panel-padding);
        width: 100%;
        height: 100%;
      }
    }

    .drill-down-details {
      display: flex;
    }

    .smart-content {
      strong {
        margin-right: var(--smart-pivot-panel-padding);
        margin-left: calc(var(--smart-pivot-panel-padding) / 3);
      }
    }

    smart-table {
      min-height: 0;
    }
  }

  &.fields {
    --smart-window-footer-padding: 0;
    --smart-window-footer-height: 0px;
    --smart-window-default-width: 600px;
    --smart-window-default-height: 800px;

    smart-pivot-panel {
      width: 100%;
      height: 100%;

      >.smart-container {
        grid-template-rows: auto 1fr;
        grid-template-columns: unset;

        >div:first-child {
          order: 1;
        }

        >div:nth-child(2) {
          order: 0;
        }
      }

      .smart-filter-panel {
        .smart-filter-panel-button-container>smart-button {
          width: 40%;
        }
      }

      .smart-pivot-panel-columns-view {
        grid-template-rows: 2fr 1fr 1fr 1fr;
      }

      .smart-pivot-panel-tabs {
        border-left: none;
        writing-mode: unset;
      }

      .smart-pivot-panel-tab-item {
        height: auto;
        border-bottom-width: calc(2 * var(--smart-border-width));
        border-left-width: var(--smart-border-width);
        border-left-color: transparent;

        &:first-child {
          margin-top: 0;
          margin-right: var(--smart-pivot-panel-padding);
        }

        &:focus {
          border-color: var(--smart-ui-state-color-focus);
        }

        &.selected {
          border-bottom-color: var(--smart-primary);

          &:focus {
            border-color: var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) var(--smart-primary) var(--smart-ui-state-color-focus);
          }
        }

        .icon {
          margin-bottom: 0;
          margin-right: 3px;
        }
      }
    }

    &:not([animation="none"]) {
      smart-pivot-panel {
        .smart-pivot-panel-tab-item {
          transition: border-bottom-color 0.3s ease-out;
        }
      }
    }
  }
}

.smart-window.smart-table-window {

  &.drill-down,
  &.fields {
    .smart-content-container {
      >.smart-footer {
        display: none;
      }
    }
  }
}

/* PivotPanel */
.smart-pivot-panel {
  border: var(--smart-border-width) solid var(--smart-border);
  width: var(--smart-pivot-panel-width);
  height: var(--smart-pivot-panel-default-height);

  >.smart-container {
    display: grid;
    grid-template-columns: 1fr auto;
    min-width: 0;
    min-height: 0;

    >div:first-child {
      min-height: 0;
    }

    .check-box {
      position: relative;
      left: unset;
      transform: none;
    }
  }

  smart-accordion-item {
    .smart-content-container {
      padding: 0;
    }

    &.filtered {
      .smart-label {
        position: relative;
        color: var(--smart-primary);

        &:before {
          //width: 100%;
          height: 100%;
          font-family: var(--smart-font-family-icon);
          font-style: normal;
          font-weight: normal;
          font-size: var(--smart-arrow-size);
          color: inherit;
          text-decoration: inherit;
          font-variant: normal;
          text-transform: none;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          //position: relative;
          content: var(--smart-icon-filter);
          position: absolute;
          right: calc(100% + var(--smart-pivot-panel-padding) / 2);
          width: 16px;
        }
      }
    }
  }

  smart-tree-item {
    .settings-icon {
      margin-right: calc(var(--smart-pivot-panel-padding) / 2);

      &:before {
        width: 100%;
        height: 100%;
        font-family: var(--smart-font-family-icon);
        font-style: normal;
        font-weight: normal;
        font-size: var(--smart-arrow-size);
        color: inherit;
        text-decoration: inherit;
        font-variant: normal;
        text-transform: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        position: relative;
        content: var(--smart-icon-settings);
      }
    }
  }

  smart-accordion {
    width: 100%;
    height: 100%;
  }

  smart-filter-panel {
    width: 100%;
    height: 100%;

    >.smart-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      row-gap: var(--smart-pivot-panel-padding);

      >div:nth-child(2) {
        min-height: 0;
      }

      smart-tree {
        height: 100%;
      }
    }
  }

  smart-tree {
    &.smart-element {
      visibility: inherit;
    }

    &:focus {
      border-color: var(--smart-ui-state-color-focus);
    }
  }

  .icon {
    &:before {
      width: 100%;
      height: 100%;
      font-family: var(--smart-font-family-icon);
      font-style: normal;
      font-weight: normal;
      font-size: var(--smart-arrow-size);
      color: inherit;
      text-decoration: inherit;
      font-variant: normal;
      text-transform: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      position: relative;
    }
  }

  .smart-accordion {
    smart-accordion-item {
      .smart-accordion-item-content {
        padding: 0;
      }
    }
  }

  .smart-pivot-panel-tabs {
    display: flex;
    border-left: var(--smart-border-width) solid var(--smart-border);
    writing-mode: vertical-lr;
  }

  .smart-pivot-panel-tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-left-width: calc(2 * var(--smart-border-width));
    height: var(--smart-pivot-panel-tab-item-height);
    padding: var(--smart-pivot-panel-padding);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;

    &:first-child {
      margin-top: var(--smart-pivot-panel-padding);

      .icon {
        &:before {
          content: var(--smart-icon-table);
        }
      }
    }

    &:nth-child(2) {
      .icon {
        &:before {
          content: var(--smart-icon-filter);
        }
      }
    }

    &:hover {
      color: var(--smart-primary);
    }

    &:focus {
      border-color: var(--smart-ui-state-color-focus);
      outline: none;
    }

    &.selected {
      border-left-color: var(--smart-primary);

      &:focus {
        border-color: var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) var(--smart-primary);
      }
    }

    .icon {
      margin-bottom: 3px;
    }
  }

  .smart-pivot-panel-columns-view {
    display: grid;
    grid-template-rows: 3fr 1fr 1fr 1fr;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;

    smart-tree {
      border-color: transparent;
      width: 100%;
      height: 100%;
    }
  }

  .smart-pivot-panel-active-columns {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    min-height: 0;
    border-top: var(--smart-border-width) solid var(--smart-border);

    smart-tree-item {
      .smart-tree-item-label-element {
        >span {
          display: flex;
        }
      }
    }
  }

  .smart-pivot-panel-label {
    display: flex;
    padding: var(--smart-pivot-panel-padding);
    background: var(--smart-primary);
    color: var(--smart-primary-color);

    .icon {
      margin-right: calc(var(--smart-pivot-panel-padding) / 2);
    }
  }

  .smart-pivot-panel-row-groups-label {
    .icon {
      &:before {
        content: var(--smart-icon-align-left);
        transform: scale(-1);
      }
    }
  }

  .smart-pivot-panel-summaries-label {
    .icon {
      &:before {
        content: var(--smart-icon-math);
      }
    }
  }

  .smart-pivot-panel-pivots-label {
    .icon {
      &:before {
        content: var(--smart-icon-refresh);
      }
    }
  }

  .smart-pivot-panel-columns-container {
    min-height: 0;
    overflow: auto;
  }

  .smart-pivot-panel-filters-view {
    height: 100%;
  }

  &:not([animation="none"]) {
    .smart-pivot-panel-tab-item {
      transition: border-left-color 0.3s ease-out;
    }
  }

  &[inverted] {
    >.smart-container {
      grid-template-columns: auto 1fr;

      >div:first-child {
        order: 1;
      }
    }

    .smart-pivot-panel-tabs {
      border-left: none;
      border-right: var(--smart-border-width) solid var(--smart-border);
    }

    .smart-pivot-panel-tab-item {
      border-left: 1px solid transparent;
      border-right-width: calc(2 * var(--smart-border-width));

      span:nth-child(2) {
        transform: rotate(180deg);
      }

      &.selected {
        border-right-color: var(--smart-primary);

        &:focus {
          border-color: var(--smart-ui-state-color-focus) var(--smart-primary) var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus);
        }
      }
    }

    &:not([animation="none"]) {
      .smart-pivot-panel-tab-item {
        transition: border-right-color 0.3s ease-out;
      }
    }
  }
}

.smart-window.smart-pivot-window {
  --smart-window-default-height: 190px;

  .smart-content-container {
    >.smart-content {
      display: grid;
      grid-template-columns: minmax(175px, auto) 1fr;
      grid-auto-rows: max-content;
      gap: var(--smart-pivot-panel-padding);
      min-width: 0;
    }

    >.smart-footer {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      smart-button {
        --smart-button-padding: 0;
        width: 40%;
        height: 100%;
      }
    }
  }

  .smart-content {
    .category.label {
      grid-column-start: 1;
      grid-column-end: 3;
      font-weight: bold;
      text-decoration: underline;
    }
  }

  smart-input {
    width: 100%;
  }

  &.summary {
    --smart-window-default-height: 500px;
  }

  &:not(.summary) .summary {
    display: none;
  }
}

/* Pivot Feedbacks */
.smart-breadcrumb-feedback {
  &.cancel:after {
    content: var(--smart-icon-block);
    background-color: var(--smart-error);
    color: var(--smart-error-color);
  }

  &.delete:after {
    content: var(--smart-icon-delete);
    background-color: var(--smart-primary);
    color: var(--smart-primary-color);
  }

  &.pivot:after {
    content: var(--smart-icon-refresh);
  }

  &.row-group:after {
    content: var(--smart-icon-align-left);
    transform: scale(-1);
  }

  &.summary:after {
    content: var(--smart-icon-math);
  }
}

.smart-tree-item-feedback {
  &.forbidden {
    border-color: var(--smart-error);
    color: var(--smart-error);

    &:before {
      width: 100%;
      height: 100%;
      font-family: var(--smart-font-family-icon);
      font-style: normal;
      font-weight: normal;
      font-size: var(--smart-arrow-size);
      color: inherit;
      text-decoration: inherit;
      font-variant: normal;
      text-transform: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      position: relative;
      content: var(--smart-icon-block);
      margin-right: calc(var(--smart-pivot-panel-padding) / 2);
    }
  }
}

@import 'rtl/_pivottable';