@import '../mixin.scss';
@import 'variable.scss';
@import 'dark.scss';

.fiz-eim {
  height: 100%;
  .fiz-eim-head {
    @include use-flex(center, space-between);
    position: relative;
    height: var(--fe-head-height);
    padding: 0 20px;
    background-color: var(--elp-bg-color);
    user-select: none;
    .fiz-eim-head-logo {
      height: 24px;
      width: 110px;
    }
    .fiz-eim-head-drag {
      flex: 1;
      height: 100%;
    }
    .fiz-eim-head-tool {
      @include use-flex(center, flex-end);
      .fiz-eim-head-tool-item {
        @include use-flex(center);
        color: var(--elp-color-info);
        padding: 0 5px;
        cursor: pointer;
        &::after {
          content: '';
          height: 20px;
          width: 1px;
          margin-left: 10px;
        }
        //&:not(:first-child)::before {
        //  background-color: var(--elp-border-color);
        //}
        &::after {
          background-color: var(--elp-border-color);
        }
      }
      .elp-switch {
        --elp-switch-on-color: #8e8e93;
        --elp-switch-off-color: #eeeef0;
        .elp-switch__core {
          border: var(--elp-border);
          .elp-switch__action {
            color: var(--elp-text-color-primary);
            background-color: var(--elp-bg-color);
          }
        }
      }
    }
    .window-overlay {
      width: auto;
      right: 0;
    }
    .fiz-eim-head-user-avatar {
      cursor: pointer;
      padding: 0 10px;
      display: flex;
      align-items: center;
      .user-nick-name {
        padding: 0 6px 0 16px;
        font-size: var(--elp-font-size-small);
      }
    }
  }
  .fiz-eim-container {
    @include use-flex();
    padding: 12px;
    height: calc(100% - var(--fe-head-height));
    background-color: var(--elp-bg-color-page);
    .fiz-eim-main {
      width: 100%;
    }
  }
  .post-text {
    // @人员样式
    &.mention {
      color: var(--elp-color-primary);
      &.mention-user {
        border-radius: 20px;
        padding: 2px 4px;
        color: #fff;
        background: var(--elp-color-primary-light-3);
      }
    }
    &.emoji {
      width: 19px;
      height: 19px;
      vertical-align: text-bottom;
    }
    &.gif-emoji {
      width: 150px;
      height: 150px;
    }
  }
}

:deep(.elp-overlay-dialog) {
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.elp-dialog.fiz-eim-dialog {
  @include use-flex(normal, normal, column);
  --elp-dialog-margin-top: 50vh;
  max-height: 90vh;
  position: absolute;
  margin: 0;
  top: var(--elp-dialog-margin-top);
  left: 50vw;
  border-radius: 12px;
  overflow: hidden;
  &.fullscreen {
    top: 10px;
    left: 10px;
    max-height: none;
    height: 98%;
    width: 99%;
  }
  .elp-dialog__header {
    min-height: 55px;
  }
  .elp-dialog__body {
    flex: 1;
    padding: 0;
    color: var(--elp-text-color-primary);
    overflow: hidden auto;
    .fiz-eim-dialog-body {
      padding: 10px 20px;
    }
  }
  .dialog-custom {
    background-color: var(--elp-bg-color-page);
  }
}

.fiz-eim-login {
  position: relative;
  height: 100%;
  .fiz-eim-login-container {
    position: absolute;
    width: 1240px;
    height: 768px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('~@/assets/image/public-view/login-bg.png');
    background-position: center;
    background-size: 100%;
    border-radius: var(--elp-border-radius-16);
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: var(--elp-box-shadow);
    .fiz-eim-logo {
      position: absolute;
      left: 24px;
      top: 24px;
      height: 24px;
      width: 110px;
      background-image: url("~@/assets/image/layout/head-log.png");
    }
    .fiz-eim-login-card {
      @include use-flex(center, center);
      flex-direction: column;
      position: absolute;
      height: 100%;
      width: 500px;
      right: 0;
      top: 0;
      padding: 0 61px ;
      background: #fff;
      .fiz-eim-login-card-head {
        width: 100%;
        span:first-child {
          font-size: 30px;
          font-weight: bold;
          margin-right: 8px;
        }
        span:last-child {
          color: var(--elp-text-color-secondary);
        }
        margin-bottom: 46px;
      }
      .elp-form-item {
        margin-bottom: 28px;
      }
      .elp-input {
        --elp-input-height: 56px;
        font-size: 16px;
        .elp-input__wrapper {
          box-shadow: none;
          background-color: var(--elp-bg-color-page);
        }
      }
      .login-operation {
        margin-top: 12px;
        margin-bottom: 22px;
      }
      .login-btn {
        width: 100%;
        height: 56px;
        font-size: 18px;
      }
    }
  }
}
