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

@mixin theme() {
  .x-image-upload {
    width: 100px;
    position: relative;
    display: grid;
    place-items: center;

    background-color: var(--color-primary-default);
    background-size: cover;
    background-repeat: no-repeat;

    text-align: center;
    text-transform: uppercase;

    font-family: var(--font-caption-family);
    font-size: 0.6rem;
    line-height: 0.6rem;
    font-weight: 900;

    @include core.elevate(high);

    input {
      width: inherit;
      position: absolute;
      inset: 0 0 0 0;
      opacity: 0;
      cursor: pointer;
    }

    &:not(.x-image-upload-disabled):hover {
      .x-image-upload-hover {
        display: grid;
        background-color: core.modifier-hover();
        background-blend-mode: multiply;
      }

      .x-image-upload-no-image {
        display: none;
      }
    }

    @include core.focusable();

    &-hover {
      display: none;
      place-items: center;
      width: 100%;
      height: 100%;
    }

    &-icon {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;

      position: absolute;
      right: 0;
      top: 0;
      border-radius: 50%;

      color: black;
      background-color: white;

      .x-icon {
        font-size: 16px;
      }
    }

    &-square &-icon {
      right: -8px;
      top: -8px;
    }

    &-disabled {
      @include core.disabled();

      input {
        cursor: not-allowed;
      }
    }
  }
}