@use '../../../../mx-core/src/base/typography';
@use '../../../../mx-core/src/base/opacity';
@use '../../../../mx-core/src/base/shape';

:host {
  display: flex;
  align-items: center;
  height: 48px;
}

.mx-file-uploader {
  &__hidden-form {
    display: none;
  }

  &__browse-btn {
    margin-right: 8px;
    min-width: fit-content;
  }

  &__clear-btn {
    cursor: pointer;
    min-width: fit-content;
    &.disabled {
      pointer-events: none;
      opacity: opacity.$opacity-38;
    }
  }

  &__placeholder,
  &__file-name {
    @extend .gl-body-lg;
    flex-grow: 1;
    text-wrap: nowrap;
    align-self: center;
    overflow: hidden;
    text-overflow: ellipsis;
    &.disabled {
      opacity: opacity.$opacity-38;
    }
  }

  &__img-wrapper {
    @extend .rounded-x-sm;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
    width: 88px;
    height: 88px;
    position: relative;
    margin-top: 4px;
    margin-bottom: 8px;

    img {
      position: relative;
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }
}