@prefix: padding-editor;

.@{prefix} {
  &- {
    &root {
      position: relative;
      border: 1px solid #DDDDDD
    }

    &border {
      border: 1px solid #DDDDDD;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      transition: background-color 300ms;

      &:hover {
        background-color: rgba(125, 125, 125, 0.1);
      }
    }

    &center {
      display: flex;
      height: 40px;
      align-items: stretch;
    }

    &border-top,
    &border-bottom {
      height: 32px;
    }

    &border-left,
    &border-right {
      flex: 1;
      width: 80px;
      height: 100%;
    }

    &border-all {
      flex: 1;
    }
  }
}