@gjs-prefix: gjs-;
@stylemanager-prefix: sp-stylemanager-;

.style-manager {
  .@{gjs-prefix}@{stylemanager-prefix}sectors {
    height: 100%;

    .@{gjs-prefix}@{stylemanager-prefix}sector {
      .@{gjs-prefix}@{stylemanager-prefix}title {
        height: 42px;
        font-size: 1.4rem;
        text-align: left;
        padding: 10px 6px;
        border: 1px solid rgba(0, 0, 0, .25);
      }

      .@{gjs-prefix}@{stylemanager-prefix}properties {
        padding-top: 6px;
        padding-bottom: 6px;

        .@{gjs-prefix}@{stylemanager-prefix}property {
          display: flex;
          padding: 3px 0;
          align-items: center;

          .@{gjs-prefix}@{stylemanager-prefix}label {
            min-width: 100px;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            padding-left: 20px;
          }

          .@{gjs-prefix}fields {
            flex: 1;

            .@{gjs-prefix}field,
            .@{gjs-prefix}@{stylemanager-prefix}field {
              width: 100%;

              &.@{gjs-prefix}field-radio {
                .@{gjs-prefix}radio-items {
                  flex-wrap: wrap;
                  .@{gjs-prefix}radio-item {
                    min-width: 50%;
                    max-width: 50%;
                  }
                }
              }
            }

            >.@{gjs-prefix}@{stylemanager-prefix}field {
              .@{gjs-prefix}@{stylemanager-prefix}properties {
                border: 1px solid rgba(0, 0, 0, .25);

                .@{gjs-prefix}@{stylemanager-prefix}property {
                  .@{gjs-prefix}@{stylemanager-prefix}label {
                    min-width: 50px;
                    max-width: 50px;
                    padding-left: 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
