// A rounded corner box containing a label “open” or “closed”

// Default 32px // Small 24px

.state, // TODO: Deprecate .State {

display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 5px 12px;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
text-align: center;
white-space: nowrap;
// stylelint-disable-next-line primer/borders
border-radius: 2em;

}

.state, // TODO: Deprecate .State, .State–draft {

color: var(--color-pr-state-draft-text);
background-color: var(--color-pr-state-draft-bg);
border: $border-width $border-style var(--color-pr-state-draft-border);

}

.State–open {

color: var(--color-pr-state-open-text);
background-color: var(--color-pr-state-open-bg);
border-color: var(--color-pr-state-open-border);

}

.State–merged {

color: var(--color-pr-state-merged-text);
background-color: var(--color-pr-state-merged-bg);
border-color: var(--color-pr-state-merged-border);

}

.State–closed {

color: var(--color-pr-state-closed-text);
background-color: var(--color-pr-state-closed-bg);
border-color: var(--color-pr-state-closed-border);

}

// Small

.State–small {

// stylelint-disable-next-line primer/spacing
padding: 0 10px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: $size-3;

.octicon {
  width: 1em; // Ensures different icons don't change State indicator width
}

}