@use "../mixins";

.alchemy-image-overlay {
  &.open {
    background-color: var(--dialog-overlay-color);
  }
}

.alchemy-image-overlay-container,
.alchemy-image-overlay-dialog {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

.alchemy-image-overlay-container {
  --picture-overlay-handle-width: 24px;
  --image-overlay-form-width: calc(350px - var(--picture-overlay-handle-width));
  --image-overlay-transition-duration: 250ms;
  --image-overlay-transition-easing: ease-in;

  &.open {
    overflow: hidden;
  }
}

.alchemy-image-overlay-dialog {
  &.hide-form {
    .picture-details-overlay {
      right: calc(-1 * var(--image-overlay-form-width));
    }

    .zoomed-picture-background {
      padding-right: var(--spacing-2);
    }

    .alchemy-image-overlay-close {
      right: calc(var(--picture-overlay-handle-width) + var(--spacing-2));
    }

    .next-picture {
      right: var(--picture-overlay-handle-width);
    }

    .picture-overlay-handle {
      right: 0;

      .icon {
        transform: rotate(180deg) translate(50%, 50%);
      }
    }
  }
}

.alchemy-image-overlay-body {
  width: 100%;
  height: 100%;

  > .message {
    margin: var(--spacing-2);
    max-width: 400px;
  }
}

.alchemy-image-overlay-close {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  top: var(--spacing-2);
  right: calc(
    var(--spacing-2) + var(--picture-overlay-handle-width) +
      var(--image-overlay-form-width)
  );
  cursor: pointer;
  transition: right var(--image-overlay-transition-duration)
    var(--image-overlay-transition-easing);

  .icon {
    font-size: 2em;
    color: var(--color-grey_light);
    text-shadow: 0 0 4px var(--text-color);
    transition: color var(--image-overlay-transition-duration) linear;

    &:hover {
      color: var(--color-white);
    }
  }
}

.picture-details-overlay,
.picture-overlay-handle {
  position: absolute;
  top: 0;
  background-color: var(--dialog-background-color);
  box-shadow: var(--image-overlay-box-shadow);
  transition: right var(--image-overlay-transition-duration)
    var(--image-overlay-transition-easing);
}

.picture-details-overlay {
  right: 0;
  width: var(--image-overlay-form-width);
  height: 100%;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-1);
  overflow: auto;

  form .control-label {
    text-align: left;
  }

  form .input .hint {
    margin-left: 0;
  }

  form .input .select2-container,
  form .input input[type="text"],
  form .input textarea {
    width: 100%;
  }
}

.picture-overlay-handle {
  width: var(--picture-overlay-handle-width);
  height: 100%;
  right: var(--image-overlay-form-width);
  cursor: pointer;
  transition-property: right, background-color;

  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: var(--icon-color);
    transition: transform var(--image-overlay-transition-duration)
      var(--image-overlay-transition-easing);
  }

  &:hover {
    background-color: var(--image-overlay-hover-bg-color);
  }
}

.zoomed-picture-background {
  width: 100%;
  height: 100%;
  padding-top: var(--spacing-2);
  padding-right: calc(
    var(--image-overlay-form-width) + var(--spacing-2) +
      var(--picture-overlay-handle-width)
  );
  padding-bottom: var(--spacing-2);
  padding-left: var(--spacing-2);
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  transition: padding-right var(--image-overlay-transition-duration)
    var(--image-overlay-transition-easing);

  &:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
    height: 100%;
    margin-left: -4px;
  }

  img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--border-color);
    box-shadow: var(--dialog-box-shadow);
    background: var(--thumbnail-background);
    vertical-align: middle;
    cursor: default;
  }
}

.picture-form {
  margin-bottom: var(--spacing-3);
}

.picture-overlay-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;

  .previous-picture,
  .next-picture {
    display: flex;
    position: absolute;
    top: 0;
    width: 64px;
    height: 128px;
    margin-top: -64px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--image-overlay-transition-duration) linear;
    color: var(--color-white);

    alchemy-icon svg {
      width: 32px;
      height: 32px;
      filter: drop-shadow(0 0 1px var(--color-grey_very_dark));
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }

  .next-picture {
    transition-property: background-color, right;
  }

  .icon {
    --icon-size: 4em;
    fill: var(--color-grey_light);
    filter: drop-shadow(0 0 4px var(--icon-color));
    transition: all var(--image-overlay-transition-duration) linear;
    vertical-align: middle;
  }

  .previous-picture {
    left: 0;
    @include mixins.border-right-radius(var(--border-radius_medium));
  }

  .next-picture {
    right: calc(
      var(--image-overlay-form-width) + var(--picture-overlay-handle-width)
    );
    @include mixins.border-left-radius(var(--border-radius_medium));
  }
}
