@uploadcare/blocks/blocks/SimpleBtn/simple-btn.css

Building blocks for Uploadcare products integration

lr-simple-btn {
  position: relative;
  display: inline-flex;
}

lr-simple-btn button {
  padding-left: 0.2em !important;
  color: var(--clr-btn-txt-secondary);
  background-color: var(--clr-btn-bgr-secondary);
  box-shadow: var(--shadow-btn-secondary);
}

lr-simple-btn button:hover {
  background-color: var(--clr-btn-bgr-secondary-hover);
}

lr-simple-btn button:active {
  background-color: var(--clr-btn-bgr-secondary-active);
}

lr-simple-btn > lr-drop-area {
  display: contents;
}

lr-simple-btn .visual-drop-area {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--gap-min);
  border: var(--border-dashed);
  border-radius: inherit;
  transition: border-color var(--transition-duration) ease, background-color var(--transition-duration) ease,
    opacity var(--transition-duration) ease;
}

lr-simple-btn .visual-drop-area::before {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--clr-txt-light);
  background-color: var(--clr-background);
  border-radius: inherit;
  content: var(--l10n-drop-files-here);
}

lr-simple-btn > lr-drop-area[drag-state='active'] .visual-drop-area {
  background-color: var(--clr-accent-lightest);
  opacity: 1;
}
lr-simple-btn > lr-drop-area[drag-state='inactive'] .visual-drop-area {
  background-color: var(--clr-shade-lv1);
  opacity: 0;
}
lr-simple-btn > lr-drop-area[drag-state='near'] .visual-drop-area {
  background-color: var(--clr-accent-lightest);
  border-color: var(--clr-accent-light);
  opacity: 1;
}
lr-simple-btn > lr-drop-area[drag-state='over'] .visual-drop-area {
  background-color: var(--clr-accent-lightest);
  border-color: var(--clr-accent);
  opacity: 1;
}

lr-simple-btn
  > :where(lr-drop-area[drag-state='active'], lr-drop-area[drag-state='near'], lr-drop-area[drag-state='over'])
  button {
  box-shadow: none;
}

lr-simple-btn > lr-drop-area::after {
  content: '';
}