@cbpds/web-components/dist/collection/components/cbp-file-input/cbp-file-input.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-file-input-color: var(--cbp-color-text-darkest);
* @prop --cbp-file-input-color-bg: var(--cbp-color-white);
* @prop --cbp-file-input-color-border: var(--cbp-color-interactive-secondary-base);
* @prop --cbp-file-input-color-border-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-file-input-color-border-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-file-input-color-outline: transparent;
* @prop --cbp-file-input-color-outline-hover: var(--cbp-color-interactive-secondary-light);
* @prop --cbp-file-input-color-outline-focus: var(--cbp-color-interactive-focus-light);

* @prop --cbp-file-input-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-file-input-color-bg-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-file-input-color-border-dark: var(--cbp-color-interactive-secondary-light);
* @prop --cbp-file-input-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-file-input-color-border-focus-dark:var(--cbp-color-interactive-focus-light);
* @prop --cbp-file-input-color-outline-dark: transparent;
* @prop --cbp-file-input-color-outline-hover-dark: var(--cbp-color-interactive-secondary-dark);
* @prop --cbp-file-input-color-outline-focus-dark: var(--cbp-color-white);

* @prop --cbp-file-input-icon-color: var(--cbp-color-text-base);
* @prop --cbp-file-input-file-color-bg: var(--cbp-color-gray-cool-10);
* @prop --cbp-file-input-file-color-bg-dark: var(--cbp-color-gray-cool-60);
*/
:root {
  --cbp-file-input-color: var(--cbp-color-text-darkest);
  --cbp-file-input-color-bg: var(--cbp-color-white);
  --cbp-file-input-color-bg-dragged: var(--cbp-color-interactive-primary-lighter);
  --cbp-file-input-color-border: var(--cbp-color-interactive-secondary-base);
  --cbp-file-input-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-file-input-color-border-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-file-input-color-outline: transparent;
  --cbp-file-input-color-outline-hover: var(--cbp-color-interactive-secondary-light);
  --cbp-file-input-color-outline-focus: var(--cbp-color-interactive-focus-light);
  --cbp-file-input-color-dark: var(--cbp-color-text-lightest);
  --cbp-file-input-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-file-input-color-bg-dragged-dark: var(--cbp-color-interactive-primary-darker);
  --cbp-file-input-color-border-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-file-input-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-file-input-color-border-focus-dark:var(--cbp-color-interactive-focus-light);
  --cbp-file-input-color-outline-dark: transparent;
  --cbp-file-input-color-outline-hover-dark: var(--cbp-color-interactive-secondary-dark);
  --cbp-file-input-color-outline-focus-dark: var(--cbp-color-white);
  --cbp-file-input-icon-color: var(--cbp-color-text-base);
  --cbp-file-input-file-color-bg: var(--cbp-color-gray-cool-10);
  --cbp-file-input-file-color-bg-dark: var(--cbp-color-gray-cool-60);
  --cbp-file-input-file-color-bg-error: var(--cbp-color-danger-lighter);
  --cbp-file-input-file-color-bg-error-dark: var(--cbp-color-danger-darker);
}

[data-cbp-theme=light] cbp-file-input[context*=dark],
[data-cbp-theme=dark] cbp-file-input:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-file-input-color-label: var(--cbp-file-input-color-label-dark);
  --cbp-file-input-color: var(--cbp-file-input-color-dark);
  --cbp-file-input-color-bg: var(--cbp-file-input-color-bg-dark);
  --cbp-file-input-color-bg-dragged: var(--cbp-file-input-color-bg-dragged-dark);
  --cbp-file-input-color-border: var(--cbp-file-input-color-border-dark);
  --cbp-file-input-color-border-hover: var(--cbp-file-input-color-border-hover-dark);
  --cbp-file-input-color-border-focus: var(--cbp-file-input-color-border-focus-dark);
  --cbp-file-input-color-outline: var(--cbp-file-input-color-outline-dark);
  --cbp-file-input-color-outline-hover: var(--cbp-file-input-color-outline-hover-dark);
  --cbp-file-input-color-outline-focus: var(--cbp-file-input-color-outline-focus-dark);
  --cbp-file-input-file-color-bg: var(--cbp-file-input-file-color-bg-dark);
  --cbp-file-input-file-color-bg-error: var(--cbp-file-input-file-color-bg-error-dark);
}

cbp-file-input {
  display: block;
  margin-block-start: var(--cbp-space-2x);
  container-type: inline-size;
}
cbp-file-input[error] {
  --cbp-file-input-color-border: var(--cbp-color-danger-dark);
  --cbp-file-input-color-border-hover: var(--cbp-color-danger-dark);
  --cbp-file-input-color-outline-hover: var(--cbp-color-danger-light);
  --cbp-file-input-color-border-dark: var(--cbp-color-danger-light);
  --cbp-file-input-color-border-hover-dark: var(--cbp-color-danger-lighter);
  --cbp-file-input-color-outline-hover-dark: var(--cbp-color-danger-light);
}
cbp-file-input[error] .cbp-file-input-visuals cbp-button {
  --cbp-button-color-bg: var(--cbp-color-danger-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-danger-darker);
  --cbp-button-color-border: var(--cbp-color-danger-dark);
  --cbp-button-color-border-hover: var(--cbp-color-danger-darker);
  --cbp-button-color-bg-dark: var(--cbp-color-danger-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-danger-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-danger-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-danger-lighter);
}
cbp-file-input:has(input.cbp-file-input-dragged) {
  --cbp-file-input-color-bg: var(--cbp-file-input-color-bg-dragged);
  --cbp-file-input-color-bg-dark: var(--cbp-file-input-color-bg-dragged-dark);
}
cbp-file-input:has(input:disabled) {
  --cbp-file-input-color: var(--cbp-color-interactive-disabled-dark);
  --cbp-file-input-color-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-file-input-color-bg: transparent;
  --cbp-file-input-color-bg-dark: transparent;
  --cbp-file-input-color-border: var(--cbp-color-interactive-disabled-dark);
  --cbp-file-input-color-border-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-file-input-icon-color: currentColor;
  --cbp-file-input-file-color-bg: var(--cbp-color-interactive-disabled-light);
  --cbp-file-input-file-color-bg-dark: var(--cbp-color-interactive-disabled-dark);
}
cbp-file-input .cbp-file-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 4.5rem;
  margin-block-end: var(--cbp-space-4x);
  color: var(--cbp-file-input-color);
  background-color: var(--cbp-file-input-color-bg);
  border-width: var(--cbp-border-size-md);
  border-color: var(--cbp-file-input-color-border);
  border-radius: var(--cbp-file-input-border-radius);
  outline-style: solid;
  outline-width: 0;
  outline-color: var(--cbp-file-input-color-outline);
  outline-offset: calc((var(--cbp-border-size-md) + var(--cbp-border-size-xl)) * -1);
  border-style: dashed;
}
cbp-file-input .cbp-file-input-wrapper:hover:not(:has(input:disabled)) {
  --cbp-file-input-color-border: var(--cbp-file-input-color-border-hover);
  --cbp-file-input-color-outline: var(--cbp-file-input-color-outline-hover);
  outline-width: var(--cbp-border-size-xl);
}
cbp-file-input .cbp-file-input-wrapper:hover:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] {
  --cbp-button-color: var(--cbp-button-color-hover);
  --cbp-button-color-bg: var(--cbp-button-color-bg-hover);
  --cbp-button-color-border: var(--cbp-button-color-border-hover);
  --cbp-button-color-dark: var(--cbp-button-color-hover-dark);
  --cbp-button-color-bg-dark: var(--cbp-button-color-bg-hover-dark);
  --cbp-button-color-border-dark: var(--cbp-button-color-border-hover-dark);
}
cbp-file-input .cbp-file-input-wrapper:focus:not(:has(input:disabled)), cbp-file-input .cbp-file-input-wrapper:focus-within:not(:has(input:disabled)) {
  --cbp-file-input-color-border: var(--cbp-file-input-color-border-focus);
  --cbp-file-input-color-outline: var(--cbp-file-input-color-outline-focus);
  outline-width: var(--cbp-border-size-xl);
}
cbp-file-input .cbp-file-input-wrapper:focus:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary], cbp-file-input .cbp-file-input-wrapper:focus-within:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] {
  --cbp-button-color: var(--cbp-button-color-focus);
  --cbp-button-color-bg: var(--cbp-button-color-bg-focus);
  --cbp-button-color-border: var(--cbp-button-color-border-focus);
  --cbp-button-color-dark: var(--cbp-button-color-focus-dark);
  --cbp-button-color-bg-dark: var(--cbp-button-color-bg-focus-dark);
  --cbp-button-color-border-dark: var(--cbp-button-color-border-focus-dark);
}
cbp-file-input .cbp-file-input-wrapper:focus:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] button, cbp-file-input .cbp-file-input-wrapper:focus-within:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] button {
  outline-width: var(--cbp-border-size-md);
}
cbp-file-input .cbp-file-input-wrapper[readonly], cbp-file-input .cbp-file-input-wrapper:disabled {
  font-style: italic;
  cursor: not-allowed;
}
cbp-file-input .cbp-file-input-wrapper .cbp-file-input-visuals {
  display: flex;
  align-items: center;
  gap: var(--cbp-space-3x);
  width: 100%;
  height: 100%;
  padding-inline-start: var(--cbp-space-4x);
  padding-inline-end: var(--cbp-space-3x);
}
cbp-file-input .cbp-file-input-wrapper .cbp-file-input-visuals .cbp-file-input-text {
  flex-grow: 1;
  display: flex;
  align-items: center;
  font-style: italic;
  text-wrap: pretty;
}
cbp-file-input .cbp-file-input-wrapper .cbp-file-input-visuals > cbp-icon {
  --cbp-icon-color: var(--cbp-file-input-icon-color);
}
cbp-file-input .cbp-file-input-wrapper input[type=file]:not(#fakeId) {
  appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: 2;
}
cbp-file-input .cbp-file-input-filelist {
  display: flex;
  flex-direction: column;
  gap: var(--cbp-space-4x);
}
cbp-file-input .cbp-file-input-filelist .cbp-file-input-file-error {
  --cbp-file-input-file-color-bg: var(--cbp-file-input-file-color-bg-error);
}
cbp-file-input .cbp-file-input-filelist > div {
  display: flex;
  align-items: center;
  gap: var(--cbp-space-2x);
  padding: var(--cbp-space-2x);
  background-color: var(--cbp-file-input-file-color-bg);
  font-style: italic;
  line-height: var(--cbp-line-height-xs);
  overflow: hidden;
  text-overflow: ellipsis;
}
cbp-file-input .cbp-file-input-filelist > div :first-child {
  flex-grow: 9;
}
cbp-file-input .cbp-file-input-filelist > div cbp-button:not(#fakeId) {
  --cbp-icon-size: var(--cbp-space-3x);
  --cbp-button-padding: 0;
  --cbp-button-min-width: var(--cbp-space-7x);
  --cbp-button-min-height: var(--cbp-space-7x);
  --cbp-button-width: var(--cbp-space-7x);
  --cbp-button-height: var(--cbp-space-7x);
  --cbp-button-border-radius: var(--cbp-border-radius-circle);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}

@container (width <= 19rem) {
  .cbp-file-input-visuals cbp-icon {
    display: none;
  }
}