@reference 'tailwindcss';

:host {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;

  .background {
    background-color: rgb(0 0 0 / 0.3);
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-radius: inherit;
  }

  .content {
    z-index: 1;
    opacity: 0;
    border-radius: inherit;
  }

  &.with-translate {
    .background {
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  &.with-blur {
    .background {
      backdrop-filter: blur(4px);
    }
  }

  &.is-disabled {
    z-index: -1;
  }
}

:host-context(.emr-card-overlay-container:hover) {
  &:not(.is-disabled) {
    .background,
    .content {
      opacity: 100%;
    }

    &.with-translate {
      .background {
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  }
}

:host-context(html.dark) {
  .background {
    background-color: rgb(255 255 255 / 0.2);
  }
}
