@import "../../../style/variables";
:host {
  color: $hd-color-font;
  .dialog-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    //max-height: 90vh;
    overflow: hidden;
  }
  .header {
    flex: 0 0 auto;
    display: flex;
    column-gap: 10px;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid $hd-color-border;
    margin-bottom: 20px;
  }
  .tab-wrapper {
    display: flex;
    align-self: flex-end;
    padding: 0 20px;
  }
  .tab {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    gap: $hd-gap-default;
    opacity: 0.5;
    text-transform: uppercase;
    &.active {
      opacity: 1;
      border-bottom: 2px solid $hd-color-main;
      //color: white;
      //background: $hd-color-active-dark;
    }
  }
  .content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    width: 200%;
    transition: left 0.3s ease;
  }
  .tab-content {
    width: 50%;
    //height: 100%;
    min-height: 0;
    overflow: auto;
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 20px;
  }
  .content-wrapper {
    min-height: 0;
    box-sizing: border-box;
  }
}
#rp_model_preview {
  position: fixed;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  padding: 20px;
}
