:global(.ui-button) {
  &[data-state~="x-large"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-25) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-25) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-25);
        & :global(.button-yield) {
          margin-left: calc(var(--cells-25) / 2);
        }
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-35);
      min-width: var(--cells-35);
    }
  }
  &[data-state~="larger"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-2) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-2) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-2);
      }
      & :global(.button-yield) {
        margin-left: calc(var(--cells-2) / 2);
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-3);
      min-width: var(--cells-3);
    }
  }
  &[data-state~="large"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-15) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-15) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-15);
      }
      & :global(.button-yield) {
        margin-left: calc(var(--cells-15) / 2);
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-25);
      min-width: var(--cells-25);
    }
  }
  &[data-state~="medium"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-1) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-1) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-1);
      }
      & :global(.button-yield) {
        margin-left: calc(var(--cells-1) / 2);
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-225);
      min-width: var(--cells-225);
    }
  }
  &[data-state~="smaller"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-1) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-1) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-1);
      }
      & :global(.button-yield) {
        margin-left: calc(var(--cells-1) / 2);
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-2);
      min-width: var(--cells-2);
    }
  }
  &[data-state~="small"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-05) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-05) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-05);
      }
      & :global(.button-yield) {
        margin-left: calc(var(--cells-05) / 2);
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-15);
      min-width: var(--cells-15);
    }
  }
  &[data-state~="x-small"] {
    &[data-state~="have-word"] {
      &[data-state~="extend"] {
        & :global(.button-wrapper) {
          padding-right: calc(var(--cells-05) / 2);
          & > :global(.extend-icon) {
            margin-left: calc(var(--cells-05) / 2);
          }
        }
      }
      & :global(.button-wrapper) {
        padding: 0 var(--cells-05);
      }
      & :global(.button-yield) {
        margin-left: calc(var(--cells-05) / 2);
      }
    }
    & :global(.button-wrapper) {
      min-height: var(--cells-1);
      min-width: var(--cells-1);
    }
  }
  &[data-state~='block'] {
    display: block;
    flex-grow: 1;
    max-width: 100%;
  }
  &[data-state~='left'] {
    & :global(.button-wrapper) {
      justify-content: flex-start;
      & > :global(.button-label) {
        flex-grow: 1;
        text-align: left;
      }
    }
  }
  &[data-state~='right'] {
    & :global(.button-wrapper) {
      justify-content: flex-end;
      & > :global(.button-label) {
        flex-grow: 1;
        text-align: right;
      }
    }
  }
}