_field.scss

.field {
  align-items: flex-start;
  border-top: var(--border-light);
  color: var(--color-text-base);
  display: flex;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  justify-content: flex-start;
  line-height: var(--font-size-base);
  min-height: 32px;
  padding: var(--spacing-quarter-unit) 0;
  width: 100%;
  position: relative;
  &__default-indicator {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--spacing-quarter-unit);
    z-index: 2;
    &__is-default {
      background-color: $color-cornflower;
    }
    &__clear {
      position: absolute;
      display: flex;
      width: 15px;
      height: 100%;
      top: 0;
      left: var(--spacing-quarter-unit);
      border-radius: 0 50% 50% 0;
      background-color: $color-cornflower;
      z-index: 1;
      &::before {
        content: '\00D7';
        font-size: 20px;
        font-weight: 600;
        color: white;
        display: flex;
        align-items: center;
      }
    }
  }
  &__no-title {
    width: 100%;
    padding: 0 var(--spacing-half-unit);
    align-self: center;
    line-height: var(--font-leading-body);
    &--center {
      text-align: center;
    }
  }
  &__widget {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 0;
    padding-right: var(--spacing-half-unit);
    padding-left: var(--spacing-half-unit);
    align-self: center;
    // if it has units, don't allow it to grow,
    // otherwise it should take up the available space
    &:not(.field__widget--units) {
      flex-grow: 1;
    }
    &--units {
      padding-right: 0;
    }
  }
  &__units {
    align-self: center;
  }
  &__title {
    width: 80px;
    //flex-shrink:0;
    padding-left: var(--spacing-half-unit);
    display: block;
    font-size: var(--font-size-small);
    line-height: var(--font-leading-body);
    color: var(--color-text-base);
    padding-top: var(--spacing-quarter-unit);
    user-select: none;
    &-text {
      text-transform: capitalize;
      cursor: default;
    }
  }

  &__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--spacing-quarter-unit);
    opacity: 0.5;
    svg {
      display: block;
      path {
        fill: var(--color-text-base);
      }
    }
    &:hover {
      cursor: pointer;
      opacity: 1;
      svg {
        path {
          fill: var(--color-sienna);
        }
      }
    }
  }

  &__colorscale {
    .field__widget {
      padding-right: 0;
    }
  }

  .rect,
  .square {
    border-color: var(--color-accent);
  }
  .rect-grid {
    border-color: var(--panel-background) !important;
    float: left;
    border-top: 1px solid;
    border-left: 1px solid;
  }
  .rect-container {
    margin: 0 auto;
    position: relative;
    max-width: 294px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .field {
    &__widget {
      flex-basis: auto;
    }
  }
}

.field .field {
  border-top: none;
  .field__no-title {
    padding: 0;
  }
}