.amplify-togglebutton {
  //these internal css variables are used to update the values that are influenced by multiple modified states
  --amplify-internal-togglebutton-background-color: initial;
  --amplify-internal-togglebutton-border-color: var(
    --amplify-components-togglebutton-border-color
  );
  --amplify-internal-togglebutton-color: var(
    --amplify-components-togglebutton-color
  );
  // This required to override default button styling
  background-color: var(--amplify-internal-togglebutton-background-color);
  border-color: var(--amplify-internal-togglebutton-border-color);
  color: var(--amplify-internal-togglebutton-color);

  //internal focus variables to be overwritten by other classes
  --amplify-internal-togglebutton-focus-background-color: var(
    --amplify-internal-togglebutton-background-color
  );
  --amplify-internal-togglebutton-focus-border-color: var(
    --amplify-components-togglebutton-focus-border-color
  );
  --amplify-internal-togglebutton-focus-color: var(
    --amplify-components-togglebutton-focus-color
  );
  &:focus {
    background-color: var(
      --amplify-internal-togglebutton-focus-background-color
    );
    border-color: var(--amplify-internal-togglebutton-focus-border-color);
    color: var(--amplify-internal-togglebutton-focus-color);
  }

  --amplify-internal-togglebutton-hover-background-color: var(
    --amplify-components-togglebutton-hover-background-color
  );
  // there is no primary hover border color and color but this is being made and set to its default value
  // so that it can be overwritten in different states
  --amplify-internal-togglebutton-hover-border-color: var(
    --amplify-internal-togglebutton-border-color
  );
  --amplify-internal-togglebutton-hover-color: var(
    --amplify-internal-togglebutton-color
  );
  &:hover {
    background-color: var(
      --amplify-internal-togglebutton-hover-background-color
    );
    border-color: var(--amplify-internal-togglebutton-hover-border-color);
    color: var(--amplify-internal-togglebutton-hover-color);
  }

  //internal active variables to be overwritten by other classes
  --amplify-internal-togglebutton-active-background-color: var(
    --amplify-components-togglebutton-active-background-color
  );
  &:active {
    background-color: var(
      --amplify-internal-togglebutton-active-background-color
    );
  }

  //internal disabled variables to be overwritten by other classes
  --amplify-internal-togglebutton-disabled-background-color: var(
    --amplify-components-togglebutton-disabled-background-color
  );
  --amplify-internal-togglebutton-disabled-border-color: var(
    --amplify-components-togglebutton-disabled-border-color
  );
  --amplify-internal-togglebutton-disabled-color: var(
    --amplify-components-togglebutton-disabled-color
  );
  &:disabled {
    background-color: var(
      --amplify-internal-togglebutton-disabled-background-color
    );
    border-color: var(--amplify-internal-togglebutton-disabled-border-color);
    color: var(--amplify-internal-togglebutton-disabled-color);
  }

  //pressed state for the default variation
  &--pressed {
    --amplify-internal-togglebutton-border-color: var(
      --amplify-components-togglebutton-pressed-border-color
    );
    --amplify-internal-togglebutton-background-color: var(
      --amplify-components-togglebutton-pressed-background-color
    );
    --amplify-internal-togglebutton-color: var(
      --amplify-components-togglebutton-pressed-color
    );

    // pressed hover overwrites
    --amplify-internal-togglebutton-hover-background-color: var(
      --amplify-components-togglebutton-pressed-hover-background-color
    );

    // disabled overwrites
    // there are no tokens for them but will keep the pressed styling
    --amplify-internal-togglebutton-disabled-background-color: var(
      --amplify-components-togglebutton-pressed-background-color
    );
    --amplify-internal-togglebutton-disabled-border-color: var(
      --amplify-components-togglebutton-pressed-border-color
    );
    --amplify-internal-togglebutton-disabled-color: var(
      --amplify-components-togglebutton-pressed-color
    );
  }

  &--primary {
    // overwite the default styling
    --amplify-internal-togglebutton-primary-background-color: var(
      --amplify-components-togglebutton-primary-background-color
    );
    --amplify-internal-togglebutton-background-color: var(
      --amplify-internal-togglebutton-primary-background-color
    );
    --amplify-internal-togglebutton-primary-border-color: var(
      --amplify-components-togglebutton-border-color
    );
    --amplify-internal-togglebutton-border-color: var(
      --amplify-internal-togglebutton-primary-border-color
    );
    --amplify-internal-togglebutton-primary-color: var(
      --amplify-components-togglebutton-color
    );
    --amplify-internal-togglebutton-color: var(
      --amplify-internal-togglebutton-primary-color
    );

    border-width: var(--amplify-components-togglebutton-primary-border-width);

    //these variables are being made so that the primary pressed state can overwrite them
    --amplify-internal-togglebutton-primary-focus-background-color: var(
      --amplify-components-togglebutton-primary-focus-background-color
    );
    --amplify-internal-togglebutton-primary-focus-border-color: var(
      --amplify-components-togglebutton-primary-focus-border-color
    );
    --amplify-internal-togglebutton-primary-focus-color: var(
      --amplify-components-togglebutton-primary-focus-color
    );
    --amplify-internal-togglebutton-primary-focus-box-shadow: var(
      --amplify-components-togglebutton-primary-focus-box-shadow
    );

    // focus overwrites
    --amplify-internal-togglebutton-focus-background-color: var(
      --amplify-internal-togglebutton-primary-focus-background-color
    );
    --amplify-internal-togglebutton-focus-border-color: var(
      --amplify-internal-togglebutton-primary-focus-border-color
    );
    --amplify-internal-togglebutton-focus-color: var(
      --amplify-internal-togglebutton-primary-focus-color
    );
    &:focus {
      box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
    }

    //these variables are being made so that the primary pressed state can overwrite them
    --amplify-internal-togglebutton-primary-hover-background-color: var(
      --amplify-components-togglebutton-primary-hover-background-color
    );
    // there is no primary hover border color but this is being made and set to its default value
    // so that it can be overwritten by the pressed primary hover border color
    --amplify-internal-togglebutton-primary-hover-border-color: var(
      --amplify-internal-togglebutton-primary-border-color
    );
    --amplify-internal-togglebutton-primary-hover-color: var(
      --amplify-components-togglebutton-primary-hover-color
    );
    // hover overwrites
    --amplify-internal-togglebutton-hover-background-color: var(
      --amplify-internal-togglebutton-primary-hover-background-color
    );
    --amplify-internal-togglebutton-hover-border-color: var(
      --amplify-internal-togglebutton-primary-hover-border-color
    );
    --amplify-internal-togglebutton-hover-color: var(
      --amplify-internal-togglebutton-primary-hover-color
    );

    //these variables are being made so that they can be overwritten by the primary pressed state
    --amplify-internal-togglebutton-primary-disabled-background-color: var(
      --amplify-components-togglebutton-primary-disabled-background-color
    );

    --amplify-internal-togglebutton-primary-disabled-border-color: var(
      --amplify-components-togglebutton-primary-disabled-border-color
    );
    --amplify-internal-togglebutton-primary-disabled-color: var(
      --amplify-components-togglebutton-primary-disabled-color
    );
    // disable overwrites
    --amplify-internal-togglebutton-disabled-background-color: var(
      --amplify-internal-togglebutton-primary-disabled-background-color
    );
    --amplify-internal-togglebutton-disabled-border-color: var(
      --amplify-internal-togglebutton-primary-disabled-border-color
    );
    --amplify-internal-togglebutton-disabled-color: var(
      --amplify-internal-togglebutton-primary-disabled-color
    );
  }

  &--pressed {
    //these are the primary pressed values which should beat everything above it
    --amplify-internal-togglebutton-primary-background-color: var(
      --amplify-components-togglebutton-primary-pressed-background-color
    );
    --amplify-internal-togglebutton-primary-border-color: var(
      --amplify-components-togglebutton-primary-pressed-border-color
    );
    --amplify-internal-togglebutton-primary-color: var(
      --amplify-components-togglebutton-primary-pressed-color
    );

    // pressed focus overwrites
    --amplify-internal-togglebutton-primary-focus-background-color: var(
      --amplify-components-togglebutton-primary-pressed-focus-background-color
    );
    --amplify-internal-togglebutton-primary-focus-border-color: var(
      --amplify-components-togglebutton-primary-pressed-focus-border-color
    );
    --amplify-internal-togglebutton-primary-focus-color: var(
      --amplify-components-togglebutton-primary-pressed-focus-color
    );

    // pressed hover overwrites
    --amplify-internal-togglebutton-primary-hover-background-color: var(
      --amplify-components-togglebutton-primary-pressed-hover-background-color
    );
    --amplify-internal-togglebutton-primary-hover-border-color: var(
      --amplify-components-togglebutton-primary-pressed-hover-border-color
    );
    --amplify-internal-togglebutton-primary-hover-color: var(
      --amplify-components-togglebutton-primary-pressed-hover-color
    );
    &:hover {
      --amplify-internal-togglebutton-primary-focus-box-shadow: var(
        --amplify-components-togglebutton-primary-pressed-hover-box-shadow
      );
    }

    // pressed disabled overwrites
    // there are no tokens for them but will keep the pressed styling
    --amplify-internal-togglebutton-primary-disabled-background-color: var(
      --amplify-components-togglebutton-primary-pressed-background-color
    );
    --amplify-internal-togglebutton-primary-disabled-border-color: var(
      --amplify-components-togglebutton-primary-pressed-border-color
    );
    --amplify-internal-togglebutton-primary-disabled-color: var(
      --amplify-components-togglebutton-primary-pressed-color
    );
  }

  &--link {
    // overwrite the default styling
    --amplify-internal-togglebutton-link-background-color: var(
      --amplify-components-togglebutton-link-background-color
    );
    --amplify-internal-togglebutton-link-color: var(
      --amplify-components-togglebutton-link-color
    );
    --amplify-internal-togglebutton-background-color: var(
      --amplify-internal-togglebutton-link-background-color
    );
    --amplify-internal-togglebutton-color: var(
      --amplify-internal-togglebutton-link-color
    );

    // focus overwrites
    --amplify-internal-togglebutton-link-focus-background-color: var(
      --amplify-components-togglebutton-link-focus-background-color
    );
    --amplify-internal-togglebutton-link-focus-color: var(
      --amplify-components-togglebutton-link-focus-color
    );

    --amplify-internal-togglebutton-focus-background-color: var(
      --amplify-internal-togglebutton-link-focus-background-color
    );
    --amplify-internal-togglebutton-focus-color: var(
      --amplify-internal-togglebutton-link-focus-color
    );

    // hover overwrites
    --amplify-internal-togglebutton-link-hover-background-color: var(
      --amplify-components-togglebutton-link-hover-background-color
    );
    --amplify-internal-togglebutton-link-hover-color: var(
      --amplify-components-togglebutton-link-hover-color
    );
    --amplify-internal-togglebutton-hover-background-color: var(
      --amplify-internal-togglebutton-link-hover-background-color
    );
    --amplify-internal-togglebutton-hover-color: var(
      --amplify-internal-togglebutton-link-hover-color
    );

    // disabled overwrites
    --amplify-internal-togglebutton-link-disabled-color: var(
      --amplify-components-togglebutton-link-disabled-color
    );
    --amplify-internal-togglebutton-link-disabled-background-color: var(
      --amplify-components-togglebutton-link-disabled-background-color
    );
    --amplify-internal-togglebutton-disabled-color: var(
      --amplify-internal-togglebutton-link-disabled-color
    );
    --amplify-internal-togglebutton-disabled-background-color: var(
      --amplify-internal-togglebutton-link-disabled-background-color
    );
  }

  //these are the styles for the pressed link state
  &--pressed {
    --amplify-internal-togglebutton-link-color: var(
      --amplify-components-togglebutton-link-pressed-color
    );
    --amplify-internal-togglebutton-link-background-color: var(
      --amplify-components-togglebutton-link-pressed-background-color
    );

    // pressed focus overwrites
    --amplify-internal-togglebutton-link-focus-background-color: var(
      --amplify-components-togglebutton-link-pressed-focus-background-color
    );
    --amplify-internal-togglebutton-link-focus-color: var(
      --amplify-components-togglebutton-link-pressed-focus-color
    );

    // pressed hover overwrites
    --amplify-internal-togglebutton-link-hover-background-color: var(
      --amplify-components-togglebutton-link-pressed-hover-background-color
    );
    --amplify-internal-togglebutton-link-hover-color: var(
      --amplify-components-togglebutton-link-pressed-hover-color
    );

    // pressed disabled overwrites
    // there are no tokens for them but will keep the pressed styling
    --amplify-internal-togglebutton-link-disabled-color: var(
      --amplify-components-togglebutton-link-pressed-color
    );
  }
}