@import url('../../../../css/form.css');
:host {
  width: 500px; display: inline-block; --height: 30px; --button-color: #5cb85c; --button-hover-color: #449d44; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8)
}
.container {
  width: 100%; display: inline-block !important; position: relative; z-index: 100
}
.container div.border {
  width: 100%; height: 100%; box-sizing: border-box; border: var(--input-border-color) 1px solid; pointer-events: none; position: absolute; top: 0px; left: 0px; z-index: 1000; transition: all .3s ease
}
.container div.input {
  width: 100%; height: var(--height); display: flex
}
.container div.input span.input {
  display: block; flex: 1
}
.container div.input span.input input.fileurl {
  width: 100%; height: 100%; padding: 0px 10px; border: 0px; transition: none
}
.container div.input span.input input.fileurl:focus {
  box-shadow: none
}
.container span.btn {
  width: 70px; height: 100%; background: #999999; position: relative; z-index: 100
}
.container span.btn span.bar {
  width: 100%; height: 100%; background: var(--button-color); position: absolute; left: 0px; bottom: 0px; z-index: 100; transition: width .1s linear, background .3s ease
}
.container span.btn button.upload {
  display: inline-block; width: 100%; height: 100%; line-height: 100%; padding: 0px; border: 0px; font-size: 14px; color: #fff; background: transparent; border: transparent 1px solid; border-radius: 0px; position: relative; z-index: 200; cursor: pointer
}
.container span.btn button.upload.locked {
  background: transparent !important
}
.container span.btn:hover span.bar {
  background: var(--button-hover-color)
}
.container span.btn input.file {
  display: none
}
.container.focus div.border {
  border-color: var(--input-border-color-focus); box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container.disabled span.btn span.bar {
  background-color: #999999
}