.wrapper {
  display: flex;
  align-items: center;
  height: 48px;
  width: 100%;

  @mixin outline-inward;
  @mixin style style=flat;
  color: var(--on-flat-active-color);

  @mixin font-body;

  &.checked {
    @mixin style style=amplified;
    @mixin font-body-active;
    
    & .icon {
      color: var(--instrument-enhanced-secondary-color);
    }
  }

  & .icon {
    width: 44px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    color: var(--on-flat-neutral-color);
  }

  ::slotted([slot="icon"]) {
    display: block;
    height: 24px;
    width: 24px;
  }

  & .label {
    flex: 1;
    padding-right: 32px;
  }
}