.widget-row {
  $border-color: $brand-color;
  @include border($border-color);
  &__header {
    &__position-controls,
    &__column-controls {
      @include borderRight($border-color);
      @include borderBottom($border-color);
      @include borderLeft($border-color);
      &__option {
        color: $unselected-text;
        &:not(:last-child) {
          @include borderBottom;
        }
        &__layout-preview {
          width: map-get($spacingSizes, "xlarge");
          @for $i from 1 through 12 {
            .small-#{$i} {
              width: percentage($i / 12);
            }
          }
          &__column {
            padding: map-get($spacingSizes, "xsmall");
            background-color: $dashboard-layout-preview-color;
            background-clip: content-box;
          }
        }
        &:hover {
          color: $dashboard-layout-preview-hover-color;
          .widget-row__header__column-controls__option__layout-preview__column {
            background-color: currentColor;
          }
        }
      }
    }
    &__item {
      &:not(:last-child) {
        @include borderRight($border-color);
      }
      &__button {
        vertical-align: middle;
        line-height: 1;
      }
    }
  }
  &__children {
    padding: 0.9rem 0;
  }
}