@import 'src/styles/colors';

@keyframes fadeIn {
  from { opacity: 0}
  to { opacity: 1}
}

@keyframes fadeOut {
  from { opacity: 1}
  to { opacity: 0}
}

:host {
  margin: 10px;
  color: #ffffff;
  letter-spacing: 0;
}

.download-pdf-text, .generating-pdf-text, .download-pdf-again-text {
  font-family: "PT Sans";
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  padding-left: 10px;
  display: inline-flex;
  vertical-align: center;
  width: 216px;
}

button {
  width: 300px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  vertical-align: center;
  background-color: $color-gray0;
  border: 1px solid #646383;
  &:hover {
    border: 1px solid $primary-color-main;
  }
  &.not-first-download {
    background-color: $primary-color-main;
    border: none;
    display: inherit;
    .download-pdf-again-text {
      color: $color-gray0;
      text-align: center;
      display: inherit;
      padding: 0;
    }
  }
  .pdf-icon {

  }
  .cancel-icon {
    color: $primary-color-main;
  }
}

.is-generating-pdf {
  border: 1px solid $primary-color-main;
}

.toast {
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 4px 0 4px 0;
  width: 220px;
  background-color: $primary-color-Dark;
  left: 40px;
  margin-bottom: 4px;
  position: relative;
  &.toast-display {
    animation: fadeIn 1s forwards;
  }
  &.toast-hide {
    animation: fadeOut 1s forwards;
  }
  &.toast-warn {
    background-color: $color-warning-1;
  }
}

::ng-deep {
  .mat-progress-bar {
    height: 2px !important;
    bottom: -6px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .mat-progress-bar-background {
    fill: none;
  }

  .mat-progress-bar-buffer {
    background-color: rgba(0,0,0,0);
  }
}