:host {
  display: block;
}

div.fw-data-table-container {
  $grid-header-bg: $color-smoke-25;
  $grid-body-bg: $color-milk;
  $grid-row-active: $color-azure-50;
  $grid-row-border: $color-smoke-50;

  $grid-header-txt-color: $color-smoke-700;
  $grid-row-txt-color: $color-elephant-900;

  $grid-header-txt-size: $font-size-12;
  $grid-row-txt-size: $font-size-14;
  $grid-line-height: $font-size-20;

  $grid-density-sm: 4px 8px;
  $grid-density-md: 12px 8px;
  $grid-density-lg: 16px 8px;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;

  div.fw-data-table-scrollable {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;

    table.fw-data-table {
      table-layout: fixed;
      border-collapse: collapse;
      box-sizing: border-box;
      min-width: 100%;
      width: max-content;

      thead {
        position: sticky;
        inset-block-start: 0;
        width: 100%;
        border-radius: 4px;

        tr {
          th {
            color: $grid-header-txt-color;
            font-size: $grid-header-txt-size;
            line-height: $grid-line-height;
            padding: $grid-density-md;
            font-weight: 600;
            letter-spacing: 0.2px;
            text-overflow: ellipsis;
            text-align: start;
            z-index: 1;
            box-sizing: border-box;
            min-width: 40px;
            max-width: 1000px;
            background: $grid-header-bg;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;

            &:first-of-type {
              padding-inline-start: 16px;
              border-end-start-radius: 0px;
              border-end-end-radius: 0px;
              border-start-end-radius: 0px;
              border-start-start-radius: 4px;
            }

            &:last-of-type {
              padding-inline-end: 16px;
              border-end-start-radius: 0px;
              border-end-end-radius: 0px;
              border-start-end-radius: 4px;
              border-start-start-radius: 0px;
            }

            &.data-grid-sm {
              padding: $grid-density-sm;
            }

            &.data-grid-md {
              padding: $grid-density-md;
            }

            &.data-grid-lg {
              padding: $grid-density-lg;
            }
          }

          th.hidden {
            display: none;
          }

          th.row-actions {
            white-space: nowrap;
            width: 1px;
          }
        }
      }

      tbody {
        width: 100%;
        background: $grid-body-bg;

        tr {
          width: 100%;
          border-block-end: 1px solid $grid-row-border;

          &:hover,
          &:focus {
            background: $grid-header-bg;
          }

          &.active {
            background: $grid-row-active;
          }

          &:last-child {
            border-block-end: 0px;
          }

          td {
            color: $grid-row-txt-color;
            font-size: $grid-row-txt-size;
            line-height: $grid-line-height;
            padding: $grid-density-md;
            text-overflow: ellipsis;
            box-sizing: border-box;
            z-index: 0;
            height: 64px;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;

            &.data-grid-checkbox {
              text-align: center;
              width: 20px;
            }

            &.data-grid-sm {
              padding: $grid-density-sm;
            }

            &.data-grid-md {
              padding: $grid-density-md;
            }

            &.data-grid-lg {
              padding: $grid-density-lg;
            }

            &:first-child {
              padding-inline-start: 16px;
            }

            &:last-child {
              padding-inline-end: 16px;
            }
          }

          td.row-actions {
            // column has to take up only required space
            width: 1px;
            white-space: nowrap;

            & fw-button {
              margin-inline-end: 5px;
            }

            & fw-tooltip:last-child fw-button {
              margin-inline-end: 0px;
            }
          }

          td.hidden {
            display: none;
          }
        }

        tr.loading {
          cursor: not-allowed;

          td {
            position: relative;
            opacity: 0.65;

            &::after {
              content: '';
              position: absolute;
              inset-block-start: 0px;
              inset-inline-start: 0px;
              inset-block-end: 0px;
              inset-inline-end: 0px;
            }
          }
        }

        fw-skeleton {
          display: block;
          height: 10px;
          padding-inline: 0px;
          padding-block: 4px;
          box-sizing: content-box;
        }
      }

      &.is-selectable {
        td:first-child,
        th:first-child {
          text-align: center;

          fw-checkbox {
            display: block;
            width: 16px;
            height: 20px;
          }
        }
      }
    }

    &.loading {
      opacity: 0.65;
    }

    &.shimmer {
      overflow: hidden;
    }
  }

  .fw-data-table--loading {
    position: absolute;
    inset-block-start: 0px;
    inset-inline-start: 0px;
    width: 100%;
    height: 100%;
  }

  .table-settings {
    position: absolute;
    inset-inline-end: 0px;
    inset-block-start: 0px;

    .table-settings-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .table-settings-button {
        width: 40px;
        min-height: 44px;
        background: $color-milk;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid $color-smoke-50;
        border-end-start-radius: 0px;
        border-end-end-radius: 0px;
        border-start-end-radius: 4px;
        border-start-start-radius: 0px;
        margin: 0px;

        &:focus,
        &:hover {
          cursor: pointer;
        }

        &:disabled {
          cursor: default;
          opacity: 0.65;
        }
      }

      .table-settings-options {
        z-index: 99;
        width: 500px;
        box-sizing: border-box;
        background: $color-milk;
        border: 1px solid $color-smoke-50;
        border-radius: 4px;
        box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.04);
        padding-inline-start: 0px;
        padding-block-end: 0px;
        padding-inline-end: 0px;
        padding-block-start: 22px;
        display: none;
        animation: appear 0.3s;

        &.show {
          display: block;
        }

        .table-settings-header {
          display: flex;
          width: 100%;
          box-sizing: border-box;
          font-weight: 600;
          align-items: flex-end;
          padding-inline: 22px;
          padding-block: 0px;
          margin-block-end: 16px;

          span.title {
            flex-grow: 1;
            font-size: 16px;
            line-height: 24px;
          }

          button.reset {
            flex-grow: 0;
            color: $color-azure-800;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            line-height: 17px;
            padding-inline-end: 4px;
            margin: 0px;
            background: $color-milk;
            border: 0px;

            &:focus,
            &:hover {
              cursor: pointer;
            }
          }
        }

        .table-settings-content {
          display: flex;
          width: 100%;
          height: 342px;
          box-sizing: border-box;
          padding-inline: 22px;
          padding-block: 0px;
          gap: 14px;

          .table-settings-content-left {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            width: 220px;

            .table-settings-content-title {
              box-sizing: border-box;
              padding-block-end: 5px;
              padding-inline-start: 5px;
            }

            .table-settings-content-search {
              position: relative;
              inset-block-start: -3px;
            }

            .table-settings-content-choose {
              display: flex;
              flex-direction: column;
              flex-grow: 1;
              margin-block-start: 14px;
              overflow-y: hidden;
              transform: translateX(-3px);
              width: calc(100% + 5px);

              .table-settings-content-checkboxes {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                padding-inline-start: 5px;
                padding-inline-end: 5px;

                div {
                  margin-inline: 0px;
                  margin-block: 5px;

                  fw-checkbox {
                    width: 100%;
                    overflow-wrap: break-word;
                  }
                }
              }
            }
          }

          .table-settings-content-right {
            display: flex;
            flex-direction: column;
            width: 220px;
            box-sizing: border-box;
            background: $color-smoke-50;
            border-end-start-radius: 0px;
            border-end-end-radius: 0px;
            border-start-end-radius: 4px;
            border-start-start-radius: 4px;

            .table-settings-content-title {
              box-sizing: border-box;
              padding-block-end: 3px;
              padding-inline: 12px;
              padding-block-start: 8px;
            }

            .table-settings-content-draggable {
              width: 100%;
              flex-grow: 1;
              padding-inline: 12px;
              padding-block: 0px;
              box-sizing: border-box;
              overflow-y: auto;

              .table-settings-drag-item {
                display: flex;
                background: $color-milk;
                border-radius: 4px;
                box-shadow: 0px 2px 4px rgba(18, 52, 77, 0.06);
                border: 1px solid $color-smoke-50;
                padding-inline-start: 14px;
                padding-block-end: 7px;
                padding-inline-end: 8px;
                padding-block-start: 7px;
                margin-inline: 0px;
                margin-block: 8px;
                font-size: 14px;

                .table-settings-drag-item-icon,
                .table-settings-drag-item-close {
                  width: 16px;
                  flex-grow: 0;
                  text-align: center;

                  &:focus,
                  &:hover {
                    cursor: pointer;
                  }
                }

                .table-settings-drag-item-icon.non-drag:hover,
                .table-settings-drag-item-icon.non-drag:focus {
                  cursor: default;
                }

                .table-settings-drag-item-icon {
                  width: 9px;
                }

                .table-settings-drag-item-close {
                  background: $color-milk;
                  border: 0px;
                  padding: 0px;
                  margin: 0px;
                }

                .table-settings-drag-item-text {
                  flex-grow: 1;
                  color: $color-elephant-900;
                  padding-inline: 11px;
                  padding-block: 0px;
                  box-sizing: border-box;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;

                  &:hover,
                  &:focus {
                    cursor: default;
                  }
                }
              }
            }
          }

          .table-settings-content-title {
            font-size: 14px;
            line-height: 20px;
            color: $color-smoke-700;
            font-weight: 600;
          }
        }

        .table-settings-footer {
          display: flex;
          width: 100%;
          box-sizing: border-box;
          background: $color-smoke-25;
          padding-inline: 16px;
          padding-block: 12px;
          gap: 12px;
          justify-content: flex-end;
        }
      }

      @media (prefers-reduced-motion) {
        .table-settings-options {
          animation: none;
        }
      }
    }

    .table-settings-overlay {
      position: fixed;
      width: 100vw;
      height: 100vh;
      inset-block-start: 0px;
      inset-inline-start: 0px;
      z-index: 95;
    }
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
