* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Material Icons';
  src: url('/wp-content/plugins/loyalty-suite/includes/Account/dist/fonts/MaterialIcons-Regular.woff2')
    format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.material-icons {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.loyalty-suite-material-icons {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  user-select: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  &.loyalty-suite-material-icons_pointer {
    &:hover {
      cursor: pointer;
    }
  }
}

#loyalty-suite-account {
  display: flex;
  width: 100%;
  min-height: 260px;
  color: var(--loyalty-suite-dark);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  position: relative;

  @import 'quasar/src/css/index.sass';

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: normal;
    font-weight: 700;
    letter-spacing: inherit;
    margin: 0;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  h4 {
    font-size: 14px;
  }

  h5 {
    font-size: 12px;
  }

  h6 {
    font-size: 10px;
  }

  p {
    color: var(--loyalty-suite-dark);
    line-height: normal;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
  }

  .q-date.loyalty-suite-date {
    width: 300px;
    min-width: 300px;
    background: var(--loyalty-suite-light);
    border-radius: 8px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);

    .q-date__header {
      display: none;
    }

    .q-date__navigation {
      .q-btn {
        &:hover {
          color: var(--loyalty-suite-primary) !important;
        }
      }
    }

    .q-date__today {
      color: var(--loyalty-suite-primary) !important;
      box-shadow: none;
    }

    .q-date__years-item,
    .q-date__months-item {
      .q-btn {
        color: var(--loyalty-suite-dark) !important;

        &:hover {
          color: var(--loyalty-suite-primary) !important;
        }
      }
    }

    .q-date__edit-range:after {
      border-color: var(--loyalty-suite-primary) transparent;
    }

    .q-date__edit-range-from:after,
    .q-date__edit-range-from-to:after {
      border-left-color: var(--loyalty-suite-primary);
      border-top-color: var(--loyalty-suite-primary);
      border-bottom-color: var(--loyalty-suite-primary);
    }

    .q-date__edit-range-to:after {
      border-right-color: var(--loyalty-suite-primary);
      border-top-color: var(--loyalty-suite-primary);
      border-bottom-color: var(--loyalty-suite-primary);
    }

    .q-date__range:before,
    .q-date__range-from:before,
    .q-date__range-to:before {
      background: var(--loyalty-suite-primary);
      opacity: 0.2;
    }

    .q-date__calendar-weekdays {
      .q-date__calendar-item {
        &:hover {
          cursor: default;
        }
      }
    }

    .q-date__calendar-item {
      color: var(--loyalty-suite-dark) !important;
      opacity: 1;

      &.q-date__range-from,
      &.q-date__range-to {
        .q-btn-item {
          background: var(--loyalty-suite-primary) !important;
          color: var(--loyalty-suite-light) !important;
        }
      }

      .q-btn-item {
        width: 30px;
        height: 30px;
        min-height: 30px;
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 500;
        padding: 4px 12px;
        line-height: normal;
        border-radius: 50%;

        &:hover {
          background-color: var(--loyalty-suite-primary);
          color: var(--loyalty-suite-light) !important;
        }
      }
    }

    .q-date__arrow {
      .q-btn-item {
        width: 30px;
        height: 30px;
        min-height: 30px;
        flex-shrink: 0;

        .q-ripple {
          display: none;
        }

        &:focus {
          background: transparent;
          color: var(--loyalty-suite-dark);
          border-color: none;
        }

        &:hover {
          background: transparent;
          color: var(--loyalty-suite-primary);
          border-color: none;
        }
      }
    }

    .q-btn {
      color: var(--loyalty-suite-dark) !important;
      box-shadow: none;

      .q-ripple {
        display: none;
      }
    }

    .row {
      margin: 0;
    }
  }

  .loyalty-suite-table {
    .q-table {
      margin: 0;
      padding: 0;
      border-width: 0;
      border: none;

      thead {
        border-color: var(--loyalty-suite-borders-60) !important;

        th {
          color: var(--loyalty-suite-light) !important;
          font-size: 14px !important;
          font-weight: 400 !important;
          line-height: normal !important;
          text-transform: capitalize;
          height: 40px !important;
          padding: 0 16px !important;
          border-color: var(--loyalty-suite-borders-60) !important;
        }

        tr {
          height: 40px !important;
          background: var(--loyalty-suite-primary) !important;
          border-color: var(--loyalty-suite-borders-60) !important;

          .q-icon {
            color: var(--loyalty-suite-light);
          }

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

            &.sorted {
              .q-icon {
                color: var(--loyalty-suite-light);
              }
            }

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

      tbody {
        border-color: var(--loyalty-suite-borders-60) !important;

        tr {
          border-color: var(--loyalty-suite-borders-60) !important;

          &:nth-of-type(even) {
            background: var(--loyalty-suite-light) !important;
          }

          &:nth-of-type(odd) {
            background: var(--loyalty-suite-light) !important;
          }
        }

        td {
          color: var(--loyalty-suite-dark) !important;
          font-size: 14px !important;
          line-height: normal !important;
          font-weight: 400 !important;
          padding: 10px 16px !important;
          height: 40px !important;
          border-color: var(--loyalty-suite-borders-60) !important;
          white-space: normal !important;

          &::before {
            display: none;
          }

          ul {
            margin: 0 !important;

            li {
              margin-bottom: 8px !important;

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

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

            .q-icon {
              width: auto;
              color: var(--loyalty-suite-dark);
              font-size: 14px;
            }

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

              &::after {
                display: none;
              }
            }

            &:hover {
              .q-icon {
                color: var(--loyalty-suite-light);
              }

              .q-focus-helper {
                opacity: 1;
                background: var(--loyalty-suite-primary);
              }
            }

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

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

    .q-table__bottom {
      min-height: 50px;
      padding: 4px 16px;
      font-size: 14px;
      border-top: 1px solid var(--loyalty-suite-borders-60);

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

    &.q-table__container {
      box-shadow: none;
      border: 1px solid var(--loyalty-suite-borders-60);

      .q-select .q-field__control:before {
        border: none;
      }

      div {
        &:last-child {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }

    .q-table__control {
      .q-table__bottom-item {
        font-size: 13px;
        color: var(--loyalty-suite-dark);
        line-height: normal;

        .q-field__native {
          font-size: 13px;
          color: var(--loyalty-suite-dark);
          line-height: normal;
        }

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

        &:hover {
          .q-icon {
            color: var(--loyalty-suite-primary);
          }
        }
      }

      .q-btn {
        width: 30px;
        height: 30px;
        background: var(--loyalty-suite-primary);
        margin: 0 2.5px;

        .q-icon {
          width: auto;
          font-size: 20px;
          color: var(--loyalty-suite-light);
        }

        .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: var(--loyalty-suite-primary);
          }
        }

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

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

    &.q-table__card {
      border-radius: 8px;

      .row {
        margin: 0;
      }
    }
  }
}

.loyalty-suite {
  display: flex;
  width: 100%;
  flex-direction: column;

  a {
    line-height: normal;
    margin: 0;
    text-decoration: none;

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

  .loyalty-suite-navi-loader {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 40px;
    margin-bottom: 20px;
  }

  &-warning-text {
    font-size: 14px;
    color: var(--loyalty-suite-negative);
  }

  &-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    min-height: 200px;
  }

  &-navigation {
    display: flex;
    width: 100%;
  }
}

body {
  &.loyalty-suite-no-scroll {
    overflow: hidden;
  }

  .loyalty-suite-fade-enter-active,
  .loyalty-suite-fade-leave-active {
    transition: opacity 0.25s ease;
  }

  .loyalty-suite-fade-enter-from,
  .loyalty-suite-fade-leave-to {
    opacity: 0;
  }

  .loyalty-suite-fade-enter-to,
  .loyalty-suite-fade-leave-from {
    opacity: 1;
  }

  a.loyalty-suite-button {
    display: flex;
    min-height: 28px;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--loyalty-suite-light);
    text-transform: none;
    text-decoration: none;
    border-radius: 5px;
    background: var(--loyalty-suite-primary);
    transition: 0.3s;
    position: relative;

    &.loyalty-suite-button_loading {
      pointer-events: none;

      &::after {
        display: flex;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        background: var(--loyalty-suite-primary);
        border-radius: 5px;
      }

      &::before {
        display: flex;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: 0;
        border: 2px solid var(--loyalty-suite-light);
        border-top: 2px solid transparent;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: lsp-spin 1s linear infinite;
        z-index: 3;
        position: absolute;
      }
    }

    &:hover {
      color: var(--loyalty-suite-light);
      background: var(--loyalty-suite-primary-90);
      border: none;
      box-shadow: none;
      outline: none;
    }

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

  span.loyalty-suite-button {
    display: flex;
    min-height: 28px;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--loyalty-suite-light);
    text-transform: none;
    border-radius: 5px;
    background: var(--loyalty-suite-primary);
    transition: 0.3s;
    position: relative;

    &.loyalty-suite-button_loading {
      pointer-events: none;

      &::after {
        display: flex;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        background: var(--loyalty-suite-primary);
        border-radius: 5px;
      }

      &::before {
        display: flex;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: 0;
        border: 2px solid var(--loyalty-suite-light);
        border-top: 2px solid transparent;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: lsp-spin 1s linear infinite;
        z-index: 3;
        position: absolute;
      }
    }

    &:hover {
      cursor: pointer;
      color: var(--loyalty-suite-light);
      background: var(--loyalty-suite-primary-90);
    }
  }

  .loyalty-suite-api-error-message {
    display: flex;
    align-items: center;
    color: var(--loyalty-suite-dark);
    font-size: 16px;
  }

  .loyalty-suite-loading {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .loyalty-suite-loading-table {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--loyalty-suite-light);
    opacity: 0.5;
    border-radius: 8px;
  }

  .loyalty-suite-loading-local {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    padding: 50px;
    justify-content: center;
    align-items: center;
  }

  .loyalty-suite-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--loyalty-suite-primary);
    border-bottom-color: transparent;
    border-radius: 50% !important;
    display: inline-block;
    box-sizing: border-box;
    animation: lsp-rotation 1s linear infinite;
  }

  @keyframes lsp-rotation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes lsp-spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  .loyalty-suite-popover {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 999999;
    margin-top: 5px;

    @media (max-width: 1024px) {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: 0;
      width: auto;
      background: rgba(0, 0, 0, 0.4);
      height: auto;
      max-width: 100%;
      max-height: 100%;
      overflow: auto;
    }
  }
}