<div id="app" @mousemove="doDrag(null, $event)">
  <div id='particles'><span class='particle' v-for="index in 20"></span></div>
  <h1>Border Radius Generator</h1>
  <div id="simple-switch">
    <input id='simple-switch-checkbox' type="checkbox" v-model='simple' @change='updateCorners'>
    <label for='simple-switch-checkbox'>
       <span class='switch'></span>
    </label>
    <span>Simple Mode</span>
  </div>
  <div ref='container' id='border-control' :class='{simple: (simple == true)}' :style='{height: height + "px", width: width + "px"}'>
    <div class='controls-container'>
      <span v-for="(corner, index) in corners" :data-order='index' @mousedown="startDrag(index)" :style='[corner.direction == "horizontal" ? {left: corner.move} : {top: corner.move}]'></span>
    </div>
    <div class='border-demo' :style='radius'></div>
  </div>
  <div id='size'>
    <div>
      <span>Width:</span>
      <input type='number' min="200" max="700" v-model='width' @change='handleResize'>px
    </div>
    <div>
      <span>Height:</span>
      <input type='number' min="200" max="700" v-model='height' @change='handleResize'>px
    </div>
  </div>
  <div id='display-radius'>
    border-radius: {{radius["border-radius"]}}
  </div>


</div>

/* Reference 
https://codier.io/creation/rJJwBfvBm
https://gradienthunt.com/
*/
@import url('https://fonts.googleapis.com/css?family=Varela+Round');


*{
  box-sizing: border-box;
  font-family: 'Varela Round';
}

body
{
  margin: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:  #2c5364;
  color: white;
  
  h1
  {
    text-transform: uppercase;
    margin: 2em 0 0.2em 0;
    font-style: underline;
    color: white;
    text-shadow: 1px 1px 1px black;
  }
} 

#border-control {
  display: flex;
  width: 400px;
  height: 400px;
  position: relative;
  margin: 20px 0;
  z-index: 5;
  &:hover
  {
    .controls-container
    {
      opacity: 1;
    }
  }
  
  .border-demo
  { 
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    
    &::after
    { 
      position: absolute;
      top: -250%;
      left: -250%;
      height: 600%;
      width: 600%;
      background-image: linear-gradient( 68.7deg,  rgba(29,173,235,1) 13.2%, rgba(137,149,250,1) 29.8%, rgba(229,109,212,1) 48.9%, rgba(255,68,128,1) 68.2%, rgba(255,94,0,1) 86.4% );
        background-size: 400% 400%;
        content: "";
        animation: move-gradient 60s ease infinite reverse, rotate-gradient 40s ease infinite reverse;
    }
  }
  
  .controls-container
  {
    opacity: 0.5;
    border: 2px dashed white;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
    transition: all 0.3s;
  }
  &.simple
  {
    span[data-order='1'], span[data-order='2'], span[data-order='7'], span[data-order='6'] 
   {
    display: none;
   }
  }
  span {
    position: absolute;
    background-color: white;
    height: 15px;
    width: 15px;
     transform: translate(-50%,-50%);
     cursor: pointer;
     z-index: 1;
     
   &[data-order='2'], &[data-order='3'] 
   {
    top: 100%;
   }
   
   &[data-order='5'], &[data-order='6'] 
   {
    left: 100%;
   }
  }
}

#display-radius
{
  font-size: 1.2em;
  padding: 1em;
  font-style: normal;
  background-color: rgba(255,255,255,0.1);
  border-radius: 3% / 30%;
  margin: 1em 0;
  transition: all 0.3s;
  
  &:hover
  {
    background-color: rgba(255,255,255,0.7);
    color: rgba(0,0,0,0.7);
  }
}
#size
{
  display: flex;
  min-width: 400px;
  margin: 1em 0;
  font-size: 1.2em;
  > div
  {
    width: 50%;
    padding: 0.2em 0;
    input
    {
      width: 50px;
      background-color: transparent;
      color: white;
      border: 0px solid;
      border-bottom: 1px solid white;
      text-align: center;
      outline: 0;
    }
  }
}
#simple-switch {
    display: flex;
    margin-bottom: 1.2em;
    color: rgba(180, 180, 180, 0.5);
    input {
      display: none;
      &:checked + label {
        background-color: #3498db;

        .switch {
          left: 55%;
        }
      }
    }

    label {
      width: 30px;
      height: 15px;
      border-radius: 10px;
      background-color: gray;
      display: inline-block;
      margin-right: 10px;
      position: relative;
      transition: all 0.3s;
      cursor: pointer;

      span {
        background-color: white;
        height: 80%;
        width: 40%;
        position: absolute;
        border-radius: 50%;
        left: 5%;
        top: 8%;
        transition: all 0.3s;
      }
    }
  }
  
  
  
  // Particls BG
  #particles
  {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
pointer-events: none;

$total-particles: 20;
$max-size: 70;
$min-size: 30;
$colors: rgba(255,255,255,0.2), rgba(255,255,255,0.1), rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.4), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,0.3), rgba(0,0,0,0.4), rgba(0,0,0,0.5);

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

/*.random(min, max)
  return floor(math(0, 'random') * (max - min + 1) + min)
*/
@function randomcolor()
{
  @return nth($colors, randomNum(1, 10));
}

.particle
{
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;

  @for $i from 1 through $total-particles
  {
    &:nth-child(#{$i})
    {
      $animation-speed: randomNum(30, 60) * 2s;
      $animation-delay: randomNum(0, 300) * -1s;
      $particle-color: randomcolor();
      $particle-size: randomNum($min-size, $max-size) * 1px;
      $translate-start-x: calc(100vw + #{$particle-size});
      $translate-start-y: 0;
      $translate-end-y: randomNum(0, 50) - 10 * 1vh;
      $translate-end-x: 0;

@at-root
{
      @keyframes particle-#{$i}
      {
        0%
        {
          transform: translate($translate-start-x, $translate-start-y);
        }
        100%
        {
          transform: translate($translate-end-x, $translate-end-y);
        }
      }
}

      transform: translateX($translate-start-x);
      animation-name: particle- + $i;
      animation-delay: $animation-delay;
      animation-duration: $animation-speed;
      @if ($i % 2 == 0)
      {
        animation-direction: reverse;
      } 
      background: $particle-color;
      height: $particle-size;
      width: $particle-size;
      top: (randomNum(0, 100) * 1%);
      left: -($particle-size);
  }
    
  }}
  }
  
  
@keyframes move-gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes rotate-gradient {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}

new Vue({
  el: "#app",
  data() {
    return {
      corners: [],
      cornersFull: [{
        amount: "20%",
        move: "20%",
        direction: "horizontal"
      }, {
        amount: "20%",
        move: "80%",
        direction: "horizontal"
      }, {
        amount: "20%",
        move: "80%",
        direction: "horizontal"
      }, {
        amount: "20%",
        move: "20%",
        direction: "horizontal"
      }, {
        amount: "20%",
        move: "20%",
        direction: "vertical"
      }, {
        amount: "20%",
        move: "20%",
        direction: "vertical"
      }, {
        amount: "20%",
        move: "80%",
        direction: "vertical"
      }, {
        amount: "20%",
        move: "80%",
        direction: "vertical"
      }],
      cornersSimple: [{
        amount: "40%",
        move: "40%",
        direction: "horizontal"
      }, {
        amount: "60%",
        move: "40%",
        direction: "horizontal"
      }, {
        amount: "60%",
        move: "40%",
        direction: "horizontal"
      }, {
        amount: "40%",
        move: "40%",
        direction: "horizontal"
      }, {
        amount: "40%",
        move: "40%",
        direction: "vertical"
      }, {
        amount: "40%",
        move: "40%",
        direction: "vertical"
      }, {
        amount: "60%",
        move: "40%",
        direction: "vertical"
      }, {
        amount: "60%",
        move: "40%",
        direction: "vertical"
      }],
      containerRect: {},
      dragging: false,
      moving: -1,
      radius: {
        "border-radius": ""
      },
      simple: true,
      height: 400,
      width: 400,
    }
  },
  methods: {
    handleResize: function() {
      var element = this.$refs.container;
      this.containerRect = element.getBoundingClientRect();
      console.log(this.containerRect);
    },
    startDrag(index) {
      this.dragging = true;
      this.x = this.y = 0;
      this.moving = index;
    },
    stopDrag() {
      this.dragging = false;
      this.x = this.y = 'no';
    },
    doDrag(moveCorner, event) {
      if (this.dragging) {

        // set moveCorner variable for simple mode
        moveCorner = moveCorner || this.moving;

        // Get container coords
        var left = this.containerRect.left;
        var top = this.containerRect.top;

        // get container height and weight
        var height = this.containerRect.height;
        var width = this.containerRect.width;

        // Get current corner and the direction of the corner being moved (vertical or horizontal)
        var element = this.corners[moveCorner];
        var direction = element.direction;

        // Get mouse position
        var x = event.clientX;
        var y = event.clientY;

        // Get how much the point should be moved 
        var move = (direction == "horizontal") ? x - left : y - top;
        move = move * 100;

        // Get move in percentage
        var percentage = (direction == "horizontal") ? move / width : move / height;

        if (percentage < 0)
          percentage = 0;

        if (percentage > 100)
          percentage = 100;

        percentage = Math.round(percentage);

        // For certain corners we need the calculate the position of the corner from the other side of the container. This is to displayed later in the CSS and will be applied to the border demo
        if (moveCorner == 1 || moveCorner == 2 || moveCorner == 6 || moveCorner == 7)
          element.amount = 100 - percentage + "%";
        else
          element.amount = percentage + "%";

        element.move = percentage + "%";

        if (this.simple == true) {
          switch (moveCorner) {
            case 0:
              this.doDrag(1, event);
              break;

            case 3:
              this.doDrag(2, event);
              break;

            case 4:
              this.doDrag(7, event);
              break;

            case 5:
              this.doDrag(6, event);
              break;
          }
        }
      }
    },
    getRadius: function() {
      var final = [];
      this.corners.forEach((corner, index) => {
        final.push(corner.amount);

        if (index == 3)
          final.push("/")
      });
      this.radius["border-radius"] = final.join(" ");
    },
    updateCorners: function() {
      this.corners = (this.simple) ? this.cornersSimple : this.cornersFull;
    }
  },
  watch: {
    corners: {
      handler: function() {
        this.getRadius();
      },
      deep: true
    }
  },
  mounted() {
    window.addEventListener('mouseup', this.stopDrag);
    window.addEventListener('resize', this.handleResize);
    var element = this.$refs.container;
    this.containerRect = element.getBoundingClientRect();

    this.updateCorners();
    this.getRadius();
  }
});