.cobalt-contained-icon {
  --containerSize: 48px;

  width: var(--containerSize);
  height: var(--containerSize);

  display: flex;

  justify-content: center;
  align-items: center;

  flex-shrink: 0;

  @apply c-rounded-lg;

  .cobalt-Icon {
    @include semantic-color(icon, base, fill);

    width: 24px;
    height: 24px;
  }

  &--colorAccent {
    .cobalt-Icon {
      @include semantic-color(icon, accent, fill);
    }
  }

  &--colorDisabled {
    .cobalt-Icon {
      @include semantic-color(icon, subdued, fill);
    }
  }

  &--colorError {
    .cobalt-Icon {
      @include semantic-color(icon, error, fill);
    }
  }

  &--colorInfo {
    .cobalt-Icon {
      @include semantic-color(icon, infoAlt, fill);
    }
  }

  &--colorSuccess {
    .cobalt-Icon {
      @include semantic-color(icon, success, fill);
    }
  }

  &--colorConnect {
    @apply c-bg-connect;

    .cobalt-Icon {
      @include semantic-color(icon, onConnect, fill);
    }
  }

  &--colorKeyExchange {
    @apply c-bg-keyExchange;

    .cobalt-Icon {
      @include semantic-color(icon, onKeyExchange, fill);
    }
  }

  &--colorRideshare {
    @apply c-bg-rideshare;

    .cobalt-Icon {
      @include semantic-color(icon, onRideshare, fill);
    }
  }

  &--colorBaseAlt {
    @apply c-bg-neutralAlt;
  }

  &--colorAccentAlt {
    @apply c-bg-accentAlt;

    .cobalt-Icon {
      @include semantic-color(icon, accent, fill);
    }
  }

  &--colorDisabledAlt {
    @apply c-bg-disabled;

    .cobalt-Icon {
      @include semantic-color(icon, subdued, fill);
    }
  }

  &--colorErrorAlt {
    @apply c-bg-errorAlt;

    .cobalt-Icon {
      @include semantic-color(icon, error, fill);
    }
  }

  &--colorInfoAlt {
    @apply c-bg-info;

    .cobalt-Icon {
      @include semantic-color(icon, info, fill);
    }
  }

  &--colorSuccessAlt {
    @apply c-bg-successAlt;

    .cobalt-Icon {
      @include semantic-color(icon, successAlt, fill);
    }
  }

  &--colorConnectAlt {
    @apply c-bg-connectAlt;

    .cobalt-Icon {
      @include semantic-color(icon, connectAlt, fill);
    }
  }
}