@use 'variables' as *;
@use '@xui/theme-core' as core;

@mixin theme() {
  .x-image-upload-cropper {
    --cropper-outline-color: var(--color-bg-secondary);
    --cropper-overlay-color: var(--color-bg-secondary);

    width: 40vw;
    height: 70vh;
    display: flex;
    padding: 12px;
    z-index: 10010;

    background-color: var(--color-bg-secondary);
    @include core.border-top-radius-only($border-radius);

    &-actions {
      min-height: 64px;
      padding: 8px 12px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: var(--color-bg-tertiary);

      @include core.border-bottom-radius-only($border-radius);
    }
  }
}