.o-spreadsheet {
  .o-border-selector {
    padding: 4px;

    .o-divider {
      margin: 0 6px;
    }

    .o-border-selector-section {
      .o-dropdown-line {
        height: 30px;
        margin: 1px;
        .o-line-item {
          padding: 4px;
          width: 26px;
          height: 26px;
          &.active {
            background-color: var(--os-button-active-bg);
          }
        }
      }
      .o-border-style-tool {
        padding: 0px 3px;
        margin: 2px;
        height: 25px;
      }
    }
  }

  .o-border-style-dropdown {
    padding: 4px;
    .o-style-preview {
      margin: 7px 5px 7px 5px;
      width: 60px;
      height: 5px;
    }
    .o-style-thin {
      border-bottom: 1px solid var(--os-black);
    }
    .o-style-medium {
      border-bottom: 2px solid var(--os-black);
    }
    .o-style-thick {
      border-bottom: 3px solid var(--os-black);
    }
    .o-style-dashed {
      border-bottom: 1px dashed var(--os-black);
    }
    .o-style-dotted {
      border-bottom: 1px dotted var(--os-black);
    }
    .o-dropdown-border-type {
      cursor: pointer;
      &:not(.o-disabled):not(.active):hover {
        background-color: var(--os-button-hover-bg);
      }
    }
    .o-dropdown-border-check {
      width: 20px;
      font-size: 12px;
    }
    .o-border-picker-button {
      padding: 0px !important;
      margin: 5px 0px 0px 0px !important;
      height: 25px !important;
    }
  }
}
