@charset "UTF-8";
.stateLayer{
  visibility:initial;
}

.cardActions{
  margin-left:var(--sn-primitive-dimension-4, 4px);
}
.cardActions[data-actions-visibility=always]{
  position:relative;
}

.root{
  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  padding:0;
  border:none;
  border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
  font:inherit;
  color:inherit;
  text-decoration:none;
  background-color:transparent;
}
.root[data-disabled]{
  pointer-events:none;
  cursor:default;
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
}
.root[data-disabled] .stateLayer{
  visibility:hidden;
}
.root:focus-visible{
  outline:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222)) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
}
.root:not([data-disabled]):hover .cardActions, .root:not([data-disabled]):focus-visible .cardActions, .root:not([data-disabled])[data-tooltip-open] .cardActions, .root:not([data-disabled]):has(*:focus-visible) .cardActions{
  position:relative;
  visibility:visible;
}
.root .stateLayer{
  position:absolute;
  inset:0;
  border-radius:inherit;
}
.root .stateLayer[data-state=borderOnBackground]{
  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
  border-style:solid;
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
}
.root .stateLayer[data-state=emptyNeutralOnBackground]{
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
}
.root .stateLayer[data-state=activatedOnBackground]{
  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
}
.root .stateLayer[data-state=versionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
}
.root .stateLayer[data-state=emptyVersionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
}
.root .stateLayer[data-state=inversionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
}
.root .stateLayer[data-state=emptyInversionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
}
.root .stateLayer[data-state=emptyDarkOnAccent]{
  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
}
@media (hover: hover){
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
  }
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
  }
}
.root{
}
.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
}
.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
}
.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
}
.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
}
.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
}
.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
}
.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
}
.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
}

.container{
  position:relative;
  display:flex;
  gap:var(--sn-primitive-dimension-8, 8px);
  align-items:center;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px))));
  padding:0 var(--sn-primitive-dimension-4, 4px);
  border-radius:inherit;
}

.icon{
  flex-shrink:0;
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
  height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
}

.content{
  display:flex;
  flex:1;
  gap:var(--sn-primitive-dimension-4, 4px);
  align-items:center;
  min-width:0;
  min-height:var(--sn-primitive-dimension-24, 24px);
}

.title{
  overflow:hidden;
  display:block;
  min-width:0;
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
  text-overflow:ellipsis;
  white-space:nowrap;
}