chef-step {
  display: block;
  position: relative;
  margin: 10px;
  padding: 2px 12px 2px 2px;
  border: 1px solid transparent;
  border-radius: 30px;
  background: var(--chef-white);
  box-shadow: var(--chef-box-shadow);
  font-size: 12px;
  color: var(--chef-primary-bright);
  white-space: nowrap;

  // step number
  &::before {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 8px;
    border-radius: 100%;
    background: var(--chef-primary-bright);
    color: var(--chef-white);
  }

  // horizontal line between steps
  & ~ chef-step::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 20px;
    left: -21px;
    top: 50%;
    background: var(--chef-primary-bright);
  }

  &[selected]:not([selected="false"]) {
    #{--border-color}: var(--chef-primary-bright);
    border: 1px solid var(--border-color);
    color: var(--chef-primary-bright);

    &::before {
      background: var(--chef-primary-bright);
      color: var(--chef-white);
    }
  }

  &[disabled]:not([disabled="false"]) {
    color: var(--chef-dark-grey);

    &::before {
      background: var(--chef-light-grey);
      color: var(--chef-dark-grey);
    }

    &::after {
      background: var(--chef-grey);
    }
  }

  a {
    color: inherit;
  }
}
