@import "../../assets/scss/main.scss";

.table {
  &__wrapper {
    &::v-deep {
      width: 100%;
      //todo: deprecated
      &:not(.classicTable) {
        .table {
          &-component {
            &__th {
              padding-left: 40px;
              white-space: nowrap;
              font-family: $ubuntu;
              font-weight: $bold;
              font-size: 16px;
              line-height: 20px;
              color: $gray1000;
              padding-bottom: 8px;

              &:last-child {
                padding-right: 24px;
              }

              &:first-child {
                padding-left: 24px;
              }

            }

            &__table {
              &-wrapper {
                overflow: auto;
                padding: 0 10px;
                margin: 0 -10px;
              }

              width: 100%;
              border-collapse: separate;
              border-spacing: 0 8px;

              &__body {
                tr {
                  background: #ffffff;
                  vertical-align: middle;
                  overflow: hidden;
                  border-radius: $borderRadius;
                  transition: 0.2s;

                  &:hover {
                    box-shadow: 0px 2px 10px rgba(4, 7, 31, 0.12);
                  }
                }

                td {
                  min-width: 150px;
                  white-space: nowrap;
                  vertical-align: middle;
                  font-family: $ubuntu;
                  font-size: 14px;
                  line-height: 18px;
                  color: $gray900;
                  padding: 10px 0 10px 40px;
                  border-radius: 0;
                  border: 1px solid $gray300;

                  &:last-child {
                    border-left: none;
                    border-top-right-radius: $borderRadius;
                    border-bottom-right-radius: $borderRadius;
                  }

                  &:first-child {
                    padding-left: 24px;
                    border-right: none;
                    border-top-left-radius: $borderRadius;
                    border-bottom-left-radius: $borderRadius;
                  }

                  &:not(:first-child):not(:last-child) {
                    border-left: none;
                    border-right: none;
                    border-radius: 0;
                  }

                  > div {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 340px;
                  }
                }
              }
            }

            &__lastButton {
              text-align: center;
              background: $primary;
              padding: 0 !important;
              width: 1px;

              &__content {
                cursor: pointer;
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                padding: 0 42px 0 16px;

                .svgIcon {
                  margin-right: 42px;
                }
              }

              a {
                color: #ffffff;
                font-family: $ubuntu;
                font-weight: $bold;
                font-size: 18px;
                line-height: 22px;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                white-space: nowrap;
              }
            }
          }
        }
      }

      &.classicTable {
        .table {
          &-component {
            &__th {
              padding-right: 16px;
              white-space: nowrap;
              @include headline;
              font-weight: $bold;
              color: $gray1000;
              padding-bottom: 18px;

              &:last-child {
                padding-right: 4px;
              }

              &:first-child {
                padding-left: 16px;
              }

            }

            &__table {
              &-wrapper {
                overflow: auto;
              }

              width: 100%;
              border-collapse: collapse;
              border-spacing: 0;

              &__body {
                tr {
                  background: $white;
                  vertical-align: middle;
                  overflow: hidden;
                  height: 48px;

                  &:hover {
                    background: $gray10;

                    td {
                      color: $gray1000;
                    }
                  }
                }

                td {
                  white-space: nowrap;
                  vertical-align: middle;
                  @include text();
                  color: $gray500;
                  padding: 0 40px 0 0;
                  border-top: 1px solid $gray40;

                  &.iconTd {
                    .svgIcon {
                      cursor: pointer;
                    }

                    padding-right: 8px;
                  }

                  &:first-child {
                    padding-left: 16px;
                  }

                  &:last-child {
                    padding-right: 4px;
                  }

                  > div {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 340px;
                  }
                }
              }
            }
          }
        }
      }

      td {
        &.fill {
          width: 99%;

          > div {
            min-width: 100%;
          }

          &-half {
            width: 50%;

            > div {
              min-width: 100%;
            }
          }
        }

        &.draggable__td {
          cursor: pointer;
          width: 36px;
          min-width: 36px;
          max-width: 36px;
          background-image: url("../../assets/icons/ic_moving.svg");
          background-repeat: no-repeat;
          background-position: left 12px center;
          background-size: inherit;
          padding-right: 8px !important;
          transition: 0.2s;

          &:hover {
            background-image: url("../../assets/icons/ic_moving_hover.svg");
          }

          ~ td:nth-child(2) {
            padding-left: 8px;
          }
        }
      }

      th {
        &.draggable__th {
          width: 24px;
          min-width: 24px;
          max-width: 24px;
          opacity: 0;
          margin-left: 0;
          padding-right: calc(24px + 12px) !important;

          ~ th:nth-child(2) {
            padding-left: 8px;
          }
        }
      }

      tr {
        &.sortable {
          &-chosen {
            opacity: 0.5;
          }
        }
      }

      td, th {
        text-align: left;
      }
    }
  }
  &__pagination {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    @include small-block {
      flex-wrap: wrap;
    }

    &.bottom {
      margin-top: 24px;
      margin-bottom: 0;
      justify-content: flex-end;
      @include small-block {
        justify-content: flex-start;
        margin-bottom: 32px;
      }
    }
  }

  &__bottomButton {
    margin-right: auto;
    @include small-block {
      margin-bottom: 32px;
    }
  }
}