.ds-tooltip-popper .MuiTooltip-tooltip {
  display: flex;
  align-items: center;
  background-color: var(--layer-tooltip) !important;
  min-height: 40px;
  max-width: 280px;
  padding: var(--spacing-100) var(--spacing-150);
  border-radius: var(--radius-100);
  @include body-medium-1;
  margin-top: 8px !important;
}

// Arrow styles scoped to our tooltip component
.ds-tooltip-popper .MuiTooltip-arrow {
  color: var(--layer-tooltip) !important;
}

.ds-tooltip {
  display: flex;
  align-items: center;
  max-width: unset !important;
  border-radius: var(--radius-100);
  padding: 0px !important;
  height: auto !important;
  box-shadow: var(--miscellaneous-shadow-2);

  .tooltip-box {
    display: flex;
    flex-direction: column;
    max-width: 300px;

    > .body {
      display: flex;
      gap: 8px;
      padding: 16px 16px 8px;

      > .ds-icon {
        &.delete {
          color: var(--icon-error);
        }

        &.confirmation {
          color: var(--icon-info);
        }
      }

      > .texts {
        > .title {
          @include label-medium-2;
          color: var(--text-light-fixed);
          margin-bottom: 4px;
        }

        > .desc {
          @include helper-large-1;
          color: var(--text-light-fixed);
        }
      }
    }

    > .footer {
      display: flex;
      padding: 8px 16px 16px;
      gap: 8px;
      margin-left: auto;
    }
  }
}

.ds-tooltip-simple {
  padding: 8px 16px !important;
  height: 100%;
}
