@require "../../stylus/index.styl";

.oui-file {
  border-style: dashed !important;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
  font-size: 16;

  > * {
    display: inline-flex;
    flex: none;
  }

  // icon
  svg, img {
    size: 1em;
  }

  ._content {
    use: stack-x;
    width: 100%;
    gap: 8;
    padding-y: 6;
    padding-x: 8;
  }

  ._message {
    use: stack-x;
    use: grow;
    gap: 8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:hover, &._over {
    color: var(--p1-fg);
    border-color: var(--input-border-hover);
  }

  &._disabled {
    color: var(--s2-fg);
    cursor: not-allowed;
  }
}