.open {
  @include flex(1);
  @include display(flex);
  @include align-self(stretch);
  @include align-items(center);
  @include flex-direction(column);
  @include justify-content(center);
  @include th { background: background-color(); }

  &__icons {
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(row);
    @include flex-shrink(0);
    @include justify-content(center);
    @include flex-wrap(wrap);
    .open--drag & { display: none; }
  }

  &__icon {
    text-align: center;
    cursor: pointer;
    margin: 20px;
    transition: color $base-duration $base-timing;
    &:hover { @include th { color: medium-color(); } }
    &-i, &-svg { font-size: 4em; }
    &-text {
      @include th { color: muted-color(); }
      .open__icon:hover>& { @include th { color: medium-color(); } }
    }
    &-svg {
      line-height: 0;
      >svg {
        @include size(1em);
      }
    }
    @include mobile() {
      .open__icons--lower & {
        margin: 8px;
        &-i, &-svg { font-size: 2em; }
        &-text { font-size: .5em; }
      }
    }
  }

  &__pass {
    &-area {
      @include display(flex);
      @include align-items(stretch);
      @include flex-direction(column);
      @include justify-content(flex-start);
      position: relative;
      .open--drag & { display: none; }
    }
    &-warn-wrap {
      @include display(flex);
      @include flex-direction(row);
      @include justify-content(flex-end);
    }
    &-field-wrap {
      @include display(flex);
      @include flex-direction(row);
      @include justify-content(flex-start);
      @include align-items(stretch);
      @include flex-shrink(0);
      margin-bottom: $base-padding-v;
    }
    &-enter-btn, &-opening-icon {
      padding: .6em $base-spacing;
      position: absolute;
      left: 100%;
      @include mobile { display: none; }
      @include th { color: muted-color(); }
      >i { font-size: 3em; }
    }
    &-enter-btn {
      .open--file & {
        cursor: pointer;
        &:hover {
          @include th { color: medium-color(); }
        }
      }
      .open--opening & { display: none; }
    }
    &-opening-icon {
      display: none;
      .open--opening & { display: block; }
    }
  }

  &__config {
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(column);
    @include justify-content(flex-start);
    position: relative;
    width: 30em;
    .open--drag & {
      display: none;
    }
    &-buttons {
      @include align-self(flex-end);
    }
    &-header {
      >i { margin-right: .3em; }
    }
    &-field {
      width: 100%;
    }
    &-error {
      min-height: 1.7em;
    }
    &:not(.open__config--disabled) {
      .open__config-btn-ok-text { display: inline; }
      .open__config-btn-ok-spinner { display: none; }
    }
    &.open__config--disabled {
      .open__config-btn-ok-text { display: none; }
      .open__config-btn-ok-spinner { display: block; }
    }
  }

  input[type=password].open__pass-input {
    font-size: $large-pass-font-size;
    margin-bottom: 0;
    &[readonly] { cursor: pointer; }
    @include mobile {
      width: calc(100vw - 20px);
    }
  }

  &__settings {
    @include display(flex);
    @include flex-direction(row);
    @include justify-content(space-between);
    @include align-items(stretch);
    padding-left: $base-padding-h;
    height: 2em;
    &-key-file {
      .open--file:not(.open--opening) & { cursor: pointer; }
      .open--key-file & { @include th { color: medium-color(); } }
      &-icon {
        width: 2em;
      }
      &-dropbox {
        visibility: hidden;
        margin-left: .3em;
        &:hover {
          .open--file & { visibility: visible; }
        }
      }
      &-dropbox {
        .open--key-file, .open--opening & { display: none; }
      }
      &:hover .open__settings-key-file-dropbox {
        .open--file & { visibility: visible; }
      }
    }

    &-key-file, &-key-file-dropbox {
      @include th {
        color: muted-color();
      }
      &:hover {
        .open--file:not(.open--opening) & {
          @include th { color: medium-color(); }
        }
      }
    }
  }

  &__last {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(flex-start);
    @include align-items(stretch);
    margin-top: $base-spacing;
    &-item {
      @include display(flex);
      @include flex-direction(row);
      @include justify-content(flex-start);
      @include align-items(baseline);
      @include flex-shrink(0);
      .open:not(.open--opening) & {
        @include area-selectable;
      }
      @include th { color: muted-color(); }
      padding: $base-padding;
      &-icon {
        width: 2em;
        &--svg>svg {
          vertical-align: middle;
          @include size(1em);
          path {
            @include th { fill: muted-color(); }
          }
        }
      }
      &-text { @include flex-grow(1); }
      &-icon-del {
        opacity: 0;
        .open__last-item:hover & {
          opacity: .3;
          cursor: pointer;
        }
        @include th { color: muted-color(); }
        &:hover {
          .open__last-item:hover & { opacity: 1; }
          @include th { color: medium-color(); }
        }
      }
    }
  }

  &__dropzone {
    display: none;
    .open--drag & {
      @include display(flex);
      @include flex-direction(column);
      @include flex(1 0 auto);
      @include justify-content(center);
      @include align-self(center);
      @include align-items(center);
      text-align: center;
    }
    &-icon {
      font-size: 10em;
    }
    &-header {
      margin-top: 1em;
    }
  }
}
