.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 {
    @apply c-fill-onSurface;

    width: 24px;
    height: 24px;
  }

  &--colorBase {
    .cobalt-Icon {
      @apply c-fill-onSurface;
    }
  }

  &--colorBaseAlt,
  &--colorSurfaceContainerVariant {
    @apply c-bg-surfaceContainerVariant;
  }

  &--colorAccent,
  &--colorPrimary {
    .cobalt-Icon {
      @apply c-fill-primary;
    }
  }

  &--colorAccentAlt,
  &--colorPrimaryContainer {
    @apply c-bg-primaryContainer;

    .cobalt-Icon {
      @apply c-fill-onPrimaryContainer;
    }
  }

  &--colorWarning {
    .cobalt-Icon {
      @apply c-fill-warning;
    }
  }

  &--colorWarningAlt,
  &--colorWarningContainer {
    @apply c-bg-warningContainer;

    .cobalt-Icon {
      @apply c-fill-onWarningContainer;
    }
  }

  &--colorError {
    .cobalt-Icon {
      @apply c-fill-error;
    }
  }

  &--colorErrorAlt,
  &--colorErrorContainer {
    @apply c-bg-errorContainer;

    .cobalt-Icon {
      @apply c-fill-onErrorContainer;
    }
  }

  &--colorSuccess {
    .cobalt-Icon {
      @apply c-fill-success;
    }
  }

  &--colorSuccessAlt,
  &--colorSuccessContainer {
    @apply c-bg-successContainer;

    .cobalt-Icon {
      @apply c-fill-onSuccessContainer;
    }
  }

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

    .cobalt-Icon {
      @apply c-fill-onConnect;
    }
  }

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

    .cobalt-Icon {
      @apply c-fill-onKeyExchange;
    }
  }

  &--colorDisabled,
  &--colorOnSurfaceDisabled {
    .cobalt-Icon {
      @apply c-fill-onSurfaceDisabled;
    }
  }

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

    .cobalt-Icon {
      @apply c-fill-onSurfaceDisabled;
    }
  }

  &--colorInfo {
    .cobalt-Icon {
      @apply c-fill-tertiary;
    }
  }

  &--colorInfoAlt,
  &--colorTertiaryContainer {
    @apply c-bg-tertiaryContainer;

    .cobalt-Icon {
      @apply c-fill-onSurface;
    }
  }

  &--colorDriver {
    .cobalt-Icon {
      @apply c-fill-secondary;
    }
  }

  &--colorDriverAlt {
    @apply c-bg-secondaryContainer;

    .cobalt-Icon {
      @apply c-fill-onSecondaryContainer;
    }
  }

  &--colorOwner {
    .cobalt-Icon {
      @apply c-fill-tertiary;
    }
  }

  &--colorOwnerAlt {
    @apply c-bg-tertiaryContainer;

    .cobalt-Icon {
      @apply c-fill-tertiary;
    }
  }

  &--colorOnTertiaryContainer {
    .cobalt-Icon {
      @apply c-fill-onTertiaryContainer;
    }
  }

  &--colorSurface {
    @apply c-bg-onSurface;

    .cobalt-Icon {
      @apply c-fill-surface;
    }
  }

  &--colorSurfaceContainerVariant {
    @apply c-bg-surfaceContainerVariant;
  }
}