@import '../../../mixins/box-sizing';
@import '../../../mixins/focus-state';

:host {
  @include tds-box-sizing;

  display: table-footer-group;
  height: var(--tds-spacing-element-48);

  .tds-table__footer-row {
    background-color: var(--tds-table-footer-background);
    color: var(--tds-table-color);
  }

  .tds-table__footer-cell {
    padding: 0 var(--tds-spacing-element-16);

    .tds-table__pagination {
      height: var(--tds-spacing-element-48);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tds-table__row-selector,
      .tds-table__page-selector {
        display: flex;
        align-items: center;

        .rows-per-page {
          display: flex;
          align-items: center;
          margin-right: var(--tds-spacing-element-16);

          p {
            margin-right: var(--tds-spacing-element-8);
          }
        }
      }

      .tds-table__page-selector-input {
        font: var(--tds-detail-02);
        letter-spacing: var(--tds-detail-02-ls);
        background-color: var(--tds-table-footer-page-selector-input-background);
        color: var(--tds-table-color);
        width: 74px;
        height: 30px;
        border: none;
        border-radius: var(--tds-spacing-element-4);
        transition: background-color 250ms ease;
        margin-right: var(--tds-spacing-element-4);
        padding-left: var(--tds-spacing-element-16);

        &:hover {
          background-color: var(--tds-table-footer-page-selector-input-background-hover);
        }

        &:disabled {
          color: var(--tds-table-footer-page-selector-input-color-disabled);
        }
      }

      .tds-table__page-selector-input--shake {
        animation: tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
      }

      .tds-table__footer-text {
        font: var(--tds-detail-02);
        letter-spacing: var(--tds-detail-02-ls);
        padding: 1px 8px 0 0;
      }

      .tds-table__footer-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background-color: transparent;
        cursor: pointer;
        height: var(--tds-spacing-element-32);
        width: var(--tds-spacing-element-32);
        border-radius: var(--tds-spacing-element-4);
        transition: background-color 250ms ease;
        color: var(--tds-table-footer-page-selector-icon);

        &:hover {
          background-color: var(--tds-table-footer-btn-hover);
        }

        &:disabled {
          cursor: default;
          color: var(--tds-table-footer-page-selector-icon-disabled);

          &:hover {
            background-color: transparent;
          }
        }
      }

      .tds-table__footer-btn-svg {
        height: var(--tds-spacing-element-20);
        width: var(--tds-spacing-element-20);
        fill: var(--tds-table-color);
      }
    }
  }
}

:host(.tds-table--compact) {
  height: var(--tds-spacing-element-32);

  .tds-table__footer-cell {
    .tds-table__pagination {
      height: var(--tds-spacing-element-32);

      .tds-table__page-selector-input {
        height: var(--tds-spacing-element-24);
      }

      .tds-table__footer-btn {
        height: 28px;
        width: 28px;
      }
    }
  }
}

:host(.footer__horizontal-scroll) {
  display: inline-table;
  position: absolute;
  margin-top: 10px; // height of the scrollbar
}

@keyframes tds-shake-animation {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}