✏️ Editing: editor.scss Writable

.sp-eab-spacing {
  .sp-eab-spacing-part-2 {
    text-align: center;

&.sp-eab-spacing-indicators {

.sp-eab-spacing-top,
      .sp-eab-spacing-right,
      .sp-eab-spacing-bottom,
      .sp-eab-spacing-left {
        position: relative;

&::before {
          content: "";
          background: #2f2f2f;
          position: absolute;
        }
      }

// Shared horizontal line styles (top/bottom)
      .sp-eab-spacing-top::before,
      .sp-eab-spacing-bottom::before {
        width: 80%;
        height: 1px;
        left: 50%;
        transform: translateX(-50%);
      }

// Shared vertical line styles (left/right)
      .sp-eab-spacing-right::before,
      .sp-eab-spacing-left::before {
        width: 1px;
        height: 80%;
        top: 50%;
        transform: translateY(-50%);
      }

// Individual positioning overrides
      .sp-eab-spacing {
        &-top::before {
          top: 2px;
        }

&-bottom::before {
          bottom: 2px;
        }

&-right::before {
          right: 2px;
        }

&-left {
          &::before {
            left: 4px;
          }

input {
            border-right: 1px solid #ddd;
          }
        }

&-all {
          button {
            border-left: 0;
          }
        }
      }
    }

&.sp-eab-radius-indicators {

.sp-eab-spacing-top,
      .sp-eab-spacing-right,
      .sp-eab-spacing-bottom,
      .sp-eab-spacing-left {
        position: relative;

&::before {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          border: 1px solid #2f2f2f;
        }
      }

/* Border radius indicator mixin Handles border removal and positioning for all directions */
      @mixin radius-indicator($direction) {
        @if $direction ==top {
          top: 1px;
          left: 2px;
          border-bottom: none;
          border-right: none;
        }

@else if $direction ==right {
          top: 1px;
          right: -1px;
          border-bottom: none;
          border-left: none;
        }

@else if $direction ==bottom {
          bottom: 1px;
          right: 0px;
          border-top: none;
          border-left: none;
        }

@else if $direction ==left {
          bottom: 1px;
          left: 2px;
          border-top: none;
          border-right: none;
        }
      }

/* Apply mixin to each direction variant */
      .sp-eab-spacing-top::before {
        @include radius-indicator(top);
      }

.sp-eab-spacing-right::before {
        @include radius-indicator(right);
      }

.sp-eab-spacing-bottom::before {
        @include radius-indicator(bottom);
      }

.sp-eab-spacing-left::before {
        @include radius-indicator(left);
      }

.sp-eab-spacing-left {
        input {
          border-right: 1px solid #ddd;
        }
      }

.sp-eab-spacing-all {
        button {
          border-left: 0;
        }
      }
    }

input {
      width: 100%;
      padding: 0;
      text-align: center;
      border-radius: 0;
      border-right: 0;
      border-color: #ddd;
	  font-size: unset;
	  min-height: 30px;
	  line-height: 1;

&:focus:not(:disabled) {
        outline: none;
        box-shadow: none;
        border-color: #ddd;
      }
    }
  }

.sp-eab-spacing-all {
    width: 140px;
    height: 30px;

button {
      width: 100%;
      height: 100%;
      padding: 0;
      border-radius: 0;
      justify-content: center;
      border: 1px solid #ddd;

&.active {
        background-color: var(--eab-primary-color);
        border-color: transparent;
      }

&:focus:not(:disabled) {
        outline: none;
        box-shadow: none;
      }
    }
  }

.sp-eab-spacing-left.box input,
  .sp-eab-spacing-right.box input {
    border-right: 1px solid #ddd;
    margin-right: 0;
  }

.sp-eab-spacing-indicator-label {
    margin-top: 4px;
    font-size: 10px;
    color: #2f2f2f;
  }
  input[type="number"]::-webkit-inner-spin-button {
  	height: 30px;
  }
}

🔐 Sid Gifari File Manager Pro