.spl-weather-spacing {
  &-part-2 {
    display: flex;
    text-align: center;
    label {
      font-size: 11px;
      display: inline-block;
      color: #8c8f94;
      margin-top: 4px;
    }

    &.spl-weather-spacing-indicators {

      .spl-weather-spacing-top,
      .spl-weather-spacing-right,
      .spl-weather-spacing-bottom,
      .spl-weather-spacing-left {
        position: relative;

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

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

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

      // Individual positioning overrides
      .spl-weather-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;
          }
        }
      }
    }

    &.spl-weather-radius-indicators {

      .spl-weather-spacing-top,
      .spl-weather-spacing-right,
      .spl-weather-spacing-bottom,
      .spl-weather-spacing-left {
        position: relative;

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

      /* 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 */
      .spl-weather-spacing-top::before {
        @include radius-indicator(top);
      }

      .spl-weather-spacing-right::before {
        @include radius-indicator(right);
      }

      .spl-weather-spacing-bottom::before {
        @include radius-indicator(bottom);
      }

      .spl-weather-spacing-left::before {
        @include radius-indicator(left);
      }

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

      .spl-weather-spacing-all {
        button {
          border-left: 0;
        }
      }
    }

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

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

  &-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: #f26c0d;
        border-color: transparent;
      }

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

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

.spl-weather-tab-panel .spl-weather-component-mb {
  margin-bottom: 24px;
}

.spl-weather-tab-panel .spl-weather-component-mb:last-child {
  margin-bottom: 0px;
}

.spl-weather-spacing-part-2 {
  display: flex;
}

.spl-weather-spacing-part-2 input:focus:not(:disabled) {
  outline: none;
  box-shadow: none;
  border-color: #ddd;
}

.spl-weather-spacing-all {
  width: 140px;
  height: 30px;
}

.spl-weather-spacing-all button {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  justify-content: center;
  border: 1px solid #ddd;
}

.spl-weather-spacing-all button:focus:not(:disabled) {
  outline: none;
  box-shadow: none;
}

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

.spl-weather-header-control-left,
.spl-weather-header-control-right {
  display: flex;
  align-items: center;
}

// .spl-weather-header-control-left label {
//   margin-top: 8px;
// }

.spl-weather-header-control {
  display: flex;
  justify-content: space-between;
}