@import 'part:@lyra/base/theme/variables-style';

.root {
  display: block;
}

.content {
  display: flex;
  flex-direction: column;
  position: relative;

  @media (--screen-medium) {
    flex-direction: row;
  }
}

.fileName + .functions {
  margin-top: var(--medium-padding);
}

.uploadState {
  background-color: color(var(--component-bg) a(90%));
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;

  @nest & > div {
    width: 90%;
  }
}

.cancelButton {
  margin-top: var(--medium-padding);
}

.assetWrapper {
  padding: var(--large-padding);
  composes: flexCenter from 'part:@lyra/base/theme/layout/positioning-style';
}

.fieldsWrapper {
  flex-basis: 30rem;
}

.functions {
  composes: functions from 'part:@lyra/components/fieldsets/default-style';
}

.previewAsset {
  text-align: center;
  display: flex;
  align-items: center;

  @nest & a {
    display: block;
  }
}

.fileIcon {
  font-size: 3em;
  margin-right: var(--medium-padding);
}