@import './globals.less';
@import './tableau.variables';

@addon: 'volto-tableau';
@addontype: 'tableauBlock';
@addonelement: 'tableau';

.loadAddonVariables();

@keyframes spin {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 50px 50px;
  }
}

.tableau-wrapper {
  padding: @tableauWrapperPadding;
  margin: @tableauWrapperMargin;

  .tableau-debug {
    margin: 0 auto 1rem auto;

    .tableau-version .version {
      color: @secondaryColor;
    }
  }

  .tableau {
    margin-bottom: 1rem;

    &:not(.tableau-autoscale) {
      overflow: auto;
    }

    &.tableau-autoscale {
      overflow: hidden;
    }

    iframe {
      padding: @tableauIframePadding;
      border: @tableauIframeBorder;
      border-radius: @tableauIframeBorderRadius;
      margin: @tableauIframeMargin;
      transform-origin: top left;
    }
  }

  .tableau-loader {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0 auto 1rem auto;
    animation: spin 1s linear infinite;
    background-image: linear-gradient(
      -45deg,
      @grey-1 25%,
      @grey-2 25%,
      @grey-2 50%,
      @grey-1 50%,
      @grey-1 75%,
      @grey-2 75%
    );
    background-size: 100px 100px;

    span {
      margin: 6px auto;
      color: @textColor;
      font-weight: bold;
      text-align: center;
    }
  }

  .tableau-error {
    color: @errorTextColor;
  }

  .reload-tableau {
    position: absolute;
    right: 1rem;
  }

  .json-snippet {
    .key {
      color: @secondaryColor;
    }
  }

  .important-note {
    color: @secondaryColor;

    .clear-filter-button {
      padding: 0;
      border: none;
      margin: 0;
      background-color: transparent;
      color: inherit;
      cursor: pointer;
      text-decoration: underline;

      &:hover {
        color: @primaryColor;
      }
    }
  }
}

#tableau-editor-modal {
  width: 90vw !important;
  height: calc(80vh - 10em) !important;
}