@use "@material/elevation/_index" as elevation;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;
@use "~/util";

.mdc-drawer.drawer-right.entry-modal {
  width: 400px;
}

.entry-modal {
  .mdc-drawer__header {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: 0px;
    @include util.divider-border(bottom);
    .mdc-drawer__title {
      flex-grow: 1;
      align-self: flex-start;
      &::before {
        height: 42px;
      }
      &::after {
        content: none;
      }
    }
    .mdc-linear-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
  .form {
    padding: 16px;
    display: flex;
    flex-direction: column;
    &-double {
      display: flex;
      .select-container {
        width: 112px;
        flex-grow: 0;
        flex-shrink: 0;
        @include rtl.reflexive-box(margin, right, 16px);
      }
      .field {
        flex: auto 1;
        &-container {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          align-items: stretch;
        }
      }
      .half {
        &:first-child {
          @include rtl.reflexive-box(margin, right, 8px);
        }
        &:last-child {
          @include rtl.reflexive-box(margin, left, 8px);
        }
      }
    }
    .mdc-text-field {
      margin-bottom: 16px;
      & + .mdc-text-field-helper-line {
        margin-top: -16px;
        margin-bottom: 16px;
      }
      &.mdc-text-field--textarea .mdc-text-field__input {
        resize: none;
      }
    }
    .mdc-form-field {
      margin-bottom: 16px;
    }
    .mdc-card {
      transition: elevation.transition-value();
      &.dragged {
        @include elevation.elevation(8);
      }
    }
    .date-container {
      margin-bottom: 16px;
      .date-title {
        margin: 0;
        padding: 16px;
      }
      .date-form {
        display: flex;
        flex-direction: column;
        padding: 0 16px;
        .mdc-text-field-helper-line:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    .subheader {
      margin: 0;
      margin-bottom: 16px;
    }
    .vendors-container {
      position: relative;
      .vendor-container {
        margin-bottom: 16px;
        .title-container {
          display: flex;
          align-items: center;
          padding: 16px;
          .vendor-title {
            margin: 0;
            flex-grow: 1;
          }
          .drag-handle {
            padding: 12px;
          }
        }
        .vendor-form {
          display: flex;
          flex-direction: column;
          padding: 0 16px;
          .end-date-field {
            margin-top: -16px;
          }
        }
      }
    }
    .add-button {
      display: flex;
      justify-content: flex-end;
      flex-grow: 0;
      margin-bottom: 16px;
    }
    .sales {
      &-title {
        margin: 0;
        padding: 16px;
      }
      &-image {
        position: relative;
        margin: 16px;
        margin-top: 0;
        @include util.divider-border(all, 1px, dashed);
        &.loaded {
          border: none;
          @include shape.radius(0);
          .sales-image-icon {
            display: none;
          }
        }
        &-icon {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        img {
          min-height: 56px;
          width: 100%;
        }
      }
      &-field {
        padding: 0 16px;
        display: flex;
        flex-direction: column;
      }
    }
  }
  .mdc-menu-surface--anchor .mdc-text-field {
    width: 100%;
  }
}
