@import 'mixins.scss';
@import 'components/atoms/_text.scss';
@import '../loader/loading-indicator.scss';

.import-url {
  &-bar {
    display: flex;
    height: 40px;
    margin-top: 30px;
    border-radius: 4px;
    box-shadow: 0 10px 25px 0 transparentize(color('black'), 0.8);

    &-input {
      flex: 1;
      height: 100%;
      padding: 0 14px;
      border: 0;
      border-radius: 4px 0 0 4px;
      font-family: 'Noto Sans', system;
      font-size: 16px;
      font-weight: bold;
    }

    &-submit {
      @include txt-font-accent;
      min-width: 100px;
      border: 0;
      border-radius: 0 4px 4px 0;
      font-size: 16px;
      text-transform: uppercase;
      color: color('white');
      background-color: color('blue-ribbon');

      &.loading {
        font-size: 0;
        background: color('iron');

        @extend %loading-indicator;
        &:after {
          width: 22px;
          height: 22px;
          margin: auto;
          border-width: 2px;
        }
      }
    }

    &-label {
      display: block;
      color: color('guardsman-red');
      opacity: 0;
      transition: transform .3s ease, opacity .2s ease;

      &.show {
        opacity: 1;
        transform: translate3d(0, 10px, 0);
      }
    }
  }
}
