@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$image: () !default;
$image: map.merge(
  (
    fit: 'cover',
    radius: 0,
    b-color: value('border-color-base'),
    bg-color: transparent,
    bg-color-error: value('fill-color-humble'),
    close-bg-color: value('bg-color-reverse'),
    close-color: value('bg-color-base'),
    action-size: 40px,
    action-offset: 30px
  ),
  $image
);

.#{$namespace}-image {
  &-vars {
    @include define-preset-values('image', $image);
  }

  @include basis {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    vertical-align: middle;
    user-select: none;
    background-color: value('image-bg-color');
    border-radius: value('image-radius');
  }

  @include inherit-color;

  &--border {
    border: value('border-shape') value('image-b-color');
  }

  &--loading,
  &--error {
    background-color: value('image-bg-color-error');
  }

  &__skeleton {
    width: 100%;
    height: 100%;
  }

  &__img {
    width: 100%;
    height: 100%;
    object-fit: value('image-fit');
  }

  &--preview &__img {
    cursor: pointer;
  }

  &--loading &__img,
  &--error &__img {
    width: 0;
    height: 0;
    pointer-events: none;
    visibility: hidden;
  }

  &-viewer {
    @mixin handler {
      position: absolute;
      display: flex;
      padding: 0;
      cursor: pointer;
      background-color: transparent;
      border: 0;
      outline: 0;
      @content;

      $handler: #{&}-handler;

      &-handler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: value('image-action-size');
        height: value('image-action-size');
        color: value('image-close-color');
        background-color: value('bg-color-reverse');
        border-radius: 50%;
        opacity: 60%;
        transition: value('transition-opacity');
      }

      &:hover,
      &:focus {
        #{$handler} {
          opacity: 90%;
        }
      }

      &--disabled {
        cursor: not-allowed;

        &,
        &:hover,
        &:focus {
          #{$handler} {
            opacity: 30%;
          }
        }
      }
    }

    @include basis;

    &__wrapper {
      @include inner-fixed;
    }

    &__close {
      @include handler {
        inset-inline-end: value('image-action-offset');
        top: value('image-action-offset');
      }
    }

    &__prev {
      @include handler {
        inset-inline-start: value('image-action-offset');
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &__next {
      @include handler {
        inset-inline-end: value('image-action-offset');
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .#{$namespace}-viewer {
      &__toolbar {
        bottom: value('image-action-offset');
        opacity: 60%;
        transition: value('transition-opacity');

        &:hover,
        &:focus-within {
          opacity: 90%;
        }
      }

      &__action {
        width: value('image-action-size');
        height: value('image-action-size');

        .#{$namespace}-icon {
          font-size: 1.4em;
        }
      }
    }
  }

  &-group {
    @include basis;
  }
}