@import '../themes/default';

@measure-prefix-cls: ~'@{map-prefix-cls}-measure';

.@{measure-prefix-cls} {
  position: relative;
  white-space: nowrap;
  background-image: none;
  border: @btn-border-width @btn-border-style @border-color-base;
  background-color: fade(@white, 90%);
  border-radius: @map-border-radius;
  color: @text-color;
  font-size: @font-size-sm;
  box-shadow: @btn-shadow;
  line-height: 1;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  user-select: none;

  .measure-content {
    display: flex;
    flex-direction: column;

    & > span + span {
      margin-top: 3px;
    }

    & > span > label {
      color: rgba(250, 84, 28, 0.9);
      font-weight: 600;
      padding: 0 2px;
    }
  }

  .measure-close {
    margin-left: 10px;

    &::before {
      position: absolute;
      content: '';
      top: 2px;
      right: 21px;
      width: 1px;
      height: calc(~'100% - 4px');
      background: linear-gradient(rgba(0, 0, 0, 0), @border-color-base, rgba(0, 0, 0, 0));
    }

    & > i {
      display: flex;
      font-size: 12px;
      color: @text-color;

      &:hover {
        color: @error-color;
        cursor: pointer;
      }
    }
  }
}
