@use "./vars.scss";
$border-drag-width: 8px;
$corner-drag-size: calc($border-drag-width * 2);

.codap-component {
  border-radius: vars.$border-radius-four-corners;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.25);
  height: 100%;
  outline: 1px solid vars.$focus-border-color;
  // With this next line, attribute menus are held inside the component boundaries, but bottom corners are rounded
  //overflow: hidden;
  // todo: Attribute menus should be rendered in a portal so that the overflow: hidden can be reinstated
  position: relative;
  width: 100%;

  &.focused {
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.25);
    outline-width: 2px;
  }

  input {
    &:focus {
      background-color: white !important;
      color: black !important
    }
  }
}

.codap-component-border {
  border: solid 0 transparent;
  overflow: hidden;
  position: absolute;
  margin: 0;
  user-select: none;
  z-index: 11;
  touch-action: none;
  &.right {
    width: $border-drag-width;
    cursor: e-resize;
  }
  &.bottom {
    height: $border-drag-width;
    cursor: s-resize;
  }
  &.left {
    width: $border-drag-width;
    cursor: w-resize;
  }
}

.codap-component-corner {
  border: solid 0 transparent;
  overflow: hidden;
  position: absolute;
  margin: 0;
  user-select: none;
  z-index: 11;
  touch-action: none;
  &.bottom-left {
    bottom: 0;
    left: 0;
    height: $corner-drag-size;
    width: $corner-drag-size;
    //z-index: 5;
    cursor: sw-resize;
  }
  &.bottom-right {
    bottom: 0;
    right: 0;
    height: 24px;
    width: 24px;
    //z-index: 1100;  // so it's on top of leaflet in a map component
    cursor: se-resize;
  }

  .component-resize-handle {
    fill: #d3d3d3;
    &:hover {
      fill: white;
    }
  }
}
