.amplify-switchfield {
  display: inline-block;
  font-size: var(--amplify-components-switchfield-font-size);
  cursor: pointer;
  
  &--small {
    font-size: var(--amplify-components-switchfield-small-font-size);
  }

  &--large {
    font-size: var(--amplify-components-switchfield-large-font-size);
  }
}

.amplify-switch__wrapper {
  display: inline-flex;
  align-items: center;
  &--start {
    flex-direction: row;
  }
  &--end {
    flex-direction: row-reverse;
  }
  &--top {
    flex-direction: column;
  }
  &--bottom {
    flex-direction: column-reverse;
  }
}

.amplify-switch-track {
  display: inline-flex;
  justify-content: flex-start;
  box-sizing: content-box;
  border-radius: var(--amplify-components-switchfield-track-border-radius);
  padding: var(--amplify-components-switchfield-track-padding);
  width: var(--amplify-components-switchfield-track-width);
  height: var(--amplify-components-switchfield-track-height);
  transition-duration: var(
    --amplify-components-switchfield-track-transition-duration
  );
  background-color: var(
    --amplify-components-switchfield-track-background-color
  );
  &--checked {
    background-color: var(
      --amplify-components-switchfield-track-checked-background-color
    );
  }
  &--disabled {
    opacity: var(--amplify-components-switchfield-disabled-opacity);
    cursor: not-allowed;
  }
  &--focused {
    box-shadow: var(--amplify-components-switchfield-focused-shadow);
  }
  &--error {
    background-color: var(
      --amplify-components-switchfield-track-error-background-color
    );
  }
}

.amplify-switch-thumb {
  background-color: var(
    --amplify-components-switchfield-thumb-background-color
  );
  transition-duration: var(
    --amplify-components-switchfield-thumb-transition-duration
  );
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
  width: var(--amplify-components-switchfield-thumb-width);
  height: var(--amplify-components-switchfield-thumb-width);
  border-width: var(--amplify-components-switchfield-thumb-border-width);
  border-style: var(--amplify-components-switchfield-thumb-border-style);
  border-color: var(--amplify-components-switchfield-thumb-border-color);
  overflow-wrap: break-word;
  &--checked {
    transform: var(--amplify-components-switchfield-thumb-checked-transform);
  }
  &--disabled {
    cursor: not-allowed;
  }
}

.amplify-switch-label {
  padding: var(--amplify-components-switchfield-label-padding);
  cursor: pointer;
}