.loyalty-suite {
  .loyalty-suite-pro-limit {
    display: flex;
    padding: 4px 7px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    background: $warning;
    color: $white;
  }
  .q-table {
    &__bottom {
      font-size: 14px;

      &-nodata-icon {
        display: none;
      }
    }

    &__container {
      box-shadow: $shadow-size $shadow;

      .q-inner-loading {
        &.absolute-full {
          background: $white-70;
        }
      }
    }

    &__control {
      .q-table__bottom-item {
        font-size: 13px;
        color: $dark;
        line-height: normal;

        .q-field__native {
          font-size: 13px;
          color: $dark;
          line-height: normal;
        }

        .q-field__append {
          padding-left: 0;
        }

        &:hover {
          .q-icon {
            color: $primary;
          }
        }
      }

      .q-btn {
        width: 30px;
        height: 30px;
        background: $primary;
        margin: 0 2px;

        .q-icon {
          width: auto;
          font-size: 20px;
          color: $white;
        }

        .q-ripple {
          display: none;
        }

        .q-focus-helper {
          &::before {
            display: none;
          }

          &::after {
            display: none;
          }
        }

        &.disabled {
          &:hover {
            .q-focus-helper {
              opacity: 1;
              background: transparent;
            }
          }
        }

        &:hover {
          .q-focus-helper {
            opacity: 1;
            background: $primary;
          }
        }

        &:focus {
          .q-focus-helper {
            background: transparent;
          }
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    thead {
      th {
        color: $white;
        text-transform: uppercase;
        font-size: 12px;
        height: 40px;
        padding: 0 16px;
        border-color: $white-50;
      }

      tr {
        height: 40px;
        background: $primary;

        .q-icon {
          color: $white;
        }

        th.sortable {
          .q-icon {
            margin-bottom: 4px;
          }

          &.sorted {
            .q-icon {
              color: $white;
            }
          }

          &:hover {
            .q-table__sort-icon {
              opacity: 0.6;
            }
          }
        }
      }
    }

    tbody {
      td {
        color: $dark;
        font-size: 14px;
        padding: 10px 16px;
        height: 40px;

        &::before {
          display: none;
        }

        ul {
          margin: 0;

          li {
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .q-btn {
          width: 30px;
          height: 30px;

          .q-icon {
            width: auto;
            color: $dark;
            font-size: 14px;
          }

          .q-focus-helper {
            &::before {
              display: none;
            }

            &::after {
              display: none;
            }
          }

          &:hover {
            .q-icon {
              color: $white;
            }

            .q-focus-helper {
              opacity: 1;
              background: $primary;
            }
          }

          &:focus {
            .q-focus-helper {
              opacity: 0.8;
              background: $primary;
            }
          }
        }

        a.loyalty-suite-table-view-link {
          display: inline-flex;
          width: auto;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          font-size: 12px;
          line-height: 1;
          transition: 0.3s;
          border-radius: 1em;
          padding: 5px 10px;
          margin: 0 0 0 5px;
          background: $accent;
          color: $primary;
          opacity: 0;
          visibility: hidden;

          .q-icon {
            margin-right: 7px;
            color: $primary;
          }

          &:hover {
            background: $primary;
            color: $white;

            .q-icon {
              color: $white;
            }
          }
        }

        .q-badge {
          padding: 5px 10px;
        }
      }

      tr {
        transition: 0.3s;

        &.loyalty-suite-highlight-submission {
          background: $border-light;
        }

        &:hover {
          background: $border-light;

          .loyalty-suite-table-view-link {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }

  .q-inner-loading {
    &.absolute-full {
      background: $background;
      z-index: 99999;
    }
  }

  input.loyalty-suite-list__input {
    display: flex;
    align-items: center;
    width: 220px;
    height: 37px;
    border: 1px solid $border;
    box-shadow: none;
    outline: none;
    border-radius: 4px;
    margin: 0;
    padding: 0 37px 0 10px;
    font-size: 14px;
    color: $dark;
    font-weight: 400;
    line-height: normal;
    transition: 0.3s;

    &:hover {
      border-color: $primary;
      box-shadow: none;
      outline: none;
    }

    &:focus {
      box-shadow: none;
      outline: none;
    }

    &::placeholder {
      font-size: 14px;
      color: $border-dark;
      font-weight: 400;
      line-height: normal;
    }
  }

  .loyalty-suite-list__input-wrapper {
    display: flex;
    margin-left: auto;
    position: relative;
  }

  .loyalty-suite-list__input-clear {
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: $white;
    font-weight: 700;
    line-height: normal;
    transition: 0.3s;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 50%;
    background: $primary;

    &:hover {
      cursor: pointer;
      background: $primary-90;
    }
  }
}