@import 'upload';

// set primary color
$eden-admin-primary: #563d7c!default;
$eden-admin-dropzone-width: ($spacer / 4)!default;
$eden-admin-aside-hover-color: $white!default;

.is-invalid {

  &.form-group-tel,
  &.form-group-date,
  &.form-group-text,
  &.form-group-email,
  &.form-group-number,
  &.form-group-password {
    position : relative;
  }

  .invalid-tooltip {
    display : block;
  }
}

// alter dashboard options
.eden-blocks {
  @include transition(all 0.5s ease);

  position : relative;

  .eden-dropzone-preview {
    right    : 0;
    bottom   : calc(100% + #{($spacer / 2)});
    opacity  : 0;
    position : absolute;

    border-bottom-left-radius  : 0;
    border-bottom-right-radius : 0;

    &:hover {
      opacity : 1;
      z-index : 93;
    }
  }


  .eden-dropzone {
    position : relative;
  }

  .eden-block-hover,
  .eden-dropzone-label {
    display : none;
  }

  &:hover,
  &.is-dragging {

    .eden-dropzone-preview {
      opacity : 1;
    }

    .eden-dropzone {
      .eden-block-hover,
      .eden-dropzone-label {
        display : block;
      }

      .eden-dropzone-label {
        @include border-radius();

        left       : 0;
        color      : $white;
        bottom     : calc(100% + #{($spacer / 2)});
        opacity    : 0;
        z-index    : 91;
        position   : absolute;
        background : rgba(theme-color(info), 0.5);

        padding-left  : ($spacer / 2);
        padding-right : ($spacer / 2);

        border-bottom-left-radius  : 0;
        border-bottom-right-radius : 0;

        &.eden-dropzone-label-end {
          @include border-radius();

          top    : calc(100% + #{($spacer / 2)});
          bottom : auto;

          border-top-left-radius  : 0;
          border-top-right-radius : 0;
        }
      }

      &:hover {
        .eden-add {
          opacity : 1;
        }

        &:before {
          @include border-radius($card-border-radius);

          top        : -($spacer / 2);
          left       : -($spacer / 2);
          right      : -($spacer / 2);
          bottom     : -($spacer / 2);
          border     : $border-width solid rgba(theme-color(info), 0.5);
          content    : '';
          position   : absolute;
          background : rgba(theme-color(info), 0.1);
        }

        > .eden-block-hover {
          opacity : 1;
        }
        > .eden-dropzone-label {
          opacity : 1;
        }
      }

      .eden-block {
        position : relative;

        // alter hover
        > .eden-block-hover {
          @include transition(all 0.5s ease);
          @include border-radius($card-border-radius);

          right    : ($spacer / 2);
          bottom   : 100%;
          opacity  : 0;
          z-index  : 92;
          position : absolute;

          border-bottom-left-radius  : 0;
          border-bottom-right-radius : 0;

          &.eden-block-hover-dropzone {
            right  : 0;
            bottom : calc(100% + #{($spacer / 2)});
          }

          &:hover {
            z-index : 93;
          }
        }

        &:hover {
          &:before {
            top        : -($spacer / 2);
            left       : -($spacer / 2);
            right      : -($spacer / 2);
            bottom     : -($spacer / 2);
            border     : $border-width solid rgba(theme-color(info), 0.5);
            content    : '';
            position   : absolute;
            background : rgba(theme-color(info), 0.2);
          }

          // on hover
          > eden-add > .eden-add,
          > div > eden-add > .eden-add {
            opacity : 1;
            z-index : 94;
          }
          > .eden-block-hover {
            opacity : 1;
          }
          > .eden-dropzone-label,
          > div > .eden-dropzone-label {
            opacity : 1;
          }
        }
      }
    }
  }

  .eden-add {
    @include transition(all 0.5s ease);

    top    : 0;
    left   : 0;
    right  : 0;
    bottom : 0;

    // set size
    width  : ($spacer * 3);
    height : ($spacer * 3);

    right    : $spacer;
    cursor   : pointer;
    height   : $spacer * 3;
    opacity  : 0;
    z-index  : 92;
    position : absolute;

    background    : theme-color(primary);
    border-radius : 50%;

    &:hover {
      opacity : 1;
    }

    i {
      color       : $white;
      width       : 100%;
      height      : 100%;
      text-align  : center;
      line-height : ($spacer * 3);
    }

    &.eden-add-left {
      left  : auto;
      right : 100%;
    }
    &.eden-add-right {
      left  : 100%;
      right : auto;
    }
    &.eden-add-bottom {
      top    : calc(100% - #{($spacer * 1)});
      bottom : auto;
    }
    &.eden-add-top {
      top    : auto;
      bottom : calc(100% - #{($spacer * 1)});
    }

    &.eden-add-top,
    &.eden-add-bottom {
      left      : 50%;
      transform : translateX(-50%);
    }

    &.eden-add-left,
    &.eden-add-right {
      bottom : -($spacer / 2);
    }
  }
}


.eden-blocks-sidebar {
  @include transition(all 0.5s ease);

  top      : 0;
  left     : 100%;
  width    : ($spacer * 30);
  z-index  : 1032;
  opacity  : 0;
  position : fixed;

  &.eden-blocks-sidebar-show {
    // move into view
    opacity   : 1;
    transform : translateX(-100%);
  }

  > .card {
    height        : 100vh;
    border-top    : 0;
    border-radius : 0;

    > .card-body {
      overflow-y : scroll;
    }
  }
}


.eden-blocks-backdrop {
  top        : 0;
  left       : 0;
  right      : 0;
  bottom     : 0;
  z-index    : 1031;
  position   : fixed;
  background : rgba(theme-color(secondary), 0.5);
}