/*
  Inline Labels
  ------------------------------------------------------------------------------
*/

$inline-labels--margin: $ix-border / 2;

.inline-labels {
  width: 100%;
}

.inline-labels--container {
  width: calc(100% + #{$inline-labels--margin * 2});
  position: relative;
  left: $inline-labels--margin * -2;
  display: flex;
  flex-wrap: wrap;
  padding: $inline-labels--margin;

  > .cf-label {
    margin: $inline-labels--margin;
  }
}

/*
  Round + Button for Opening Popover
  ------------------------------------------------------------------------------
*/

$label-margin: 1px;
$label-edit-button-diameter: 18px; // Should be the same as the height of labels

.cf-button.cf-button-sm.inline-labels--add {
  width: $label-edit-button-diameter;
  height: $label-edit-button-diameter;
  margin: $label-margin;
  position: relative;
  
  &,
  &:after {
    border-radius: 50%;
  }

  &:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  &:hover:after {
    transform: translate(-50%, -50%) scale(1.5,1.5);
  }
}

.inline-labels--add-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: $cf-border;
    width: floor($label-edit-button-diameter * 0.5);
    background-color: $g20-white;
    border-radius: $cf-border / 2;
    transition: width 0.25s ease;
  }

  &:before {
    transform: translate(-50%, -50%);
  }

  &:after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .cf-button.cf-button-sm.inline-labels--add:hover & {
    &:before,
    &:after {
      width: floor($label-edit-button-diameter * 0.75);
    }
  }
}
