/**
 * Copyright (c) Microblink Ltd. All rights reserved.
 */

@import "../styles/globals-sass";

:host {
  display: block;

  padding: $padding-unit-medium;

  border: var(--mb-component-image-box-border-width) solid var(--mb-component-image-box-border-color);
  border-radius: var(--mb-component-image-box-border-radius);

  .label {
    margin: 0;
    padding: 0 0 $padding-unit-small 0;

    height: var(--mb-component-image-box-label-height);
    line-height: var(--mb-component-image-box-label-height);

    color: var(--mb-component-image-box-label-color);

    font-family: var(--mb-font-family);
    font-size: var(--mb-component-image-box-label-font-size);
    font-weight: var(--mb-component-image-box-label-font-weight);
  }

  .cta {
    all: unset;
    box-sizing: border-box;
    display: block;
    height: var(--mb-component-image-box-cta-height);

    color: var(--mb-component-image-box-cta-color);

    text-decoration: none;

    font-family: var(--mb-font-family);
    font-size: var(--mb-component-image-box-cta-font-size);
    font-weight: var(--mb-component-image-box-cta-font-weight);

    .cta-label,
    svg {
      vertical-align: middle;
    }

    .cta-label {
      display: inline-block;

      max-width: calc(100% - #{$padding-unit-medium + 20px});
      height: var(--mb-component-image-box-cta-label-height);
      line-height: var(--mb-component-image-box-cta-label-height);

      margin: 0;
      padding: 0 $padding-unit-medium 0 0;

      &.filename {
        max-width: unset;
        width: calc(100% - 20px);
        padding: 0;
        color: var(--mb-component-image-box-file-color);
        font-weight: var(--mb-component-image-box-file-font-weight);

        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    svg {
      display: none;

      width: 20px;
      height: 20px;
      margin: 0;

      &.visible {
        display: inline-block;
      }
    }
  }
}

:host input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  clip: rect(1px, 1px, 1px, 1px);
}