@import '../../scss/styles.scss';

$header-height: base(5);

.edit-upload {
  --edit-upload-cell-spacing: calc(var(--base) * 1.5);
  --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
  height: 100%;
  margin-right: calc(var(--gutter-h) * -1);
  margin-left: calc(var(--gutter-h) * -1);

  &__header {
    height: $header-height;
    border-bottom: 1px solid var(--theme-elevation-150);
    padding: 0 var(--gutter-h);
    display: flex;
    justify-content: space-between;
    align-items: center;

    & h2 {
      margin: 0;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  [dir='rtl'] &__actions {
    margin-right: auto;
    margin-left: unset;
  }

  &__actions {
    min-width: 350px;
    margin-left: auto;
    padding: base(0.5) 0 base(0.5) base(1.5);
    justify-content: flex-end;
    display: flex;
    gap: base(1);
    text-wrap: nowrap;
  }

  &__toolWrap {
    display: flex;
    justify-content: flex-end;
    height: (calc(100% - #{$header-height}));
  }

  .ReactCrop__selection-addon,
  &__crop-window {
    height: 100%;
    width: 100%;
  }

  &__focal-wrapper {
    position: relative;
    display: inline-flex;
    max-height: 100%;
  }

  &__draggable-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    pointer-events: none;

    &--dragging {
      pointer-events: all;

      .edit-upload__focalPoint {
        cursor: grabbing;
      }
    }
  }

  &__draggable {
    @include btn-reset;
    position: absolute;
  }

  &__focalPoint {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    width: 50px;
    height: 50px;
    transform: translate3d(-50%, -50%, 0);
    pointer-events: all;

    svg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 100%;
      width: base(2);
      height: base(2);
      color: white;
    }
  }

  &__crop,
  &__focalOnly {
    padding: base(1.5) base(1.5) base(1.5) 0;
  }

  &__crop {
    padding: var(--edit-upload-cell-spacing);
    padding-left: var(--gutter-h);
    display: flex;
    align-items: flex-start;
    height: 100%;
  }

  &__imageWrap {
    position: relative;
  }

  &__point {
    cursor: move;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 100%;

    & svg {
      width: base(2);
      height: base(2);
    }
  }

  &__sidebar {
    border-left: 1px solid var(--theme-elevation-150);
    padding-top: var(--edit-upload-cell-spacing);
    min-width: var(--edit-upload-sidebar-width);

    & > div:first-child {
      margin-bottom: base(1);
    }
  }

  &__groupWrap {
    display: flex;
    flex-direction: column;
    gap: base(0.5);
    padding-right: var(--gutter-h);
    padding-left: var(--edit-upload-cell-spacing);
    width: 100%;

    + .edit-upload__groupWrap {
      padding-top: var(--edit-upload-cell-spacing);
      margin-top: var(--edit-upload-cell-spacing);
      border-top: 1px solid var(--theme-elevation-150);
    }
  }

  &__inputsWrap,
  &__titleWrap {
    display: flex;
    gap: base(1);
  }

  &__titleWrap {
    justify-content: space-between;
    align-items: center;

    & h3 {
      margin: 0;
    }
  }

  &__reset {
    height: fit-content;
    border-radius: var(--style-radius-s);
    background-color: var(--theme-elevation-150);
    padding: 0 base(0.25);
  }

  &__input {
    flex: 1;
    & input {
      @include formInput;
    }
  }

  @include mid-break {
    --edit-upload-cell-spacing: var(--gutter-h);
    &__sidebar {
      padding-left: 0;
      border-left: 0;
      width: 100%;
    }
    &__toolWrap {
      flex-direction: column-reverse;
    }
  }

  @include small-break {
    flex-direction: column;

    &__focalPoint {
      border-right: none;
      padding: base(1) 0;
    }

    &__inputsWrap {
      flex-direction: column;
      gap: base(1);
    }

    &__sidebar {
      min-width: 0;
    }
  }
}
