.tdw {
  .tdw__wrapper {
    background: rgba(122, 122, 122, 0.5);
    max-height: 66vh;
    height: 500px;
    position: relative;
    overflow: hidden;

    .tdw__canvas {
    }


    .tdw__overlay {
      position: absolute;
      inset: 0;
      display: none;

      .tdw__overlay__background {
        height: 100%;
        margin: 0 auto;
        display: block;
        opacity: 0.1;
      }

      .tdw__error {
        color: rgba(200, 0, 0, 0.9);
        position: absolute;
        inset: 0;
        align-content: center;
        justify-content: center;
        align-items: center;
        display: none;
      }

      .tdw__file-too-big {
        position: absolute;
        inset: 0;
        align-content: center;
        justify-content: center;
        align-items: center;
        display: none;
      }
    }
  }


  .tdw__toolbar {
    display: flex;
    justify-content: end;
    gap: 0.3rem;
    margin-top: 0.3rem;
    flex-wrap: wrap;
  }

  .tdw__button {
    display: inline-flex;
    gap: 0.5ex;
    align-items: center;
    background: rgba(122, 122, 122, 0.5);
    color: currentcolor;
    padding: 0.2rem;
    border-radius: 3px;
    min-width: 0;
    border: none;
    font-size: 0.7em;

    > .tdw__button__icon {
      width: 1.5em;
      flex: none;
    }

    > .tdw__button__caption {
      min-width: 0;
      white-space: nowrap;
      flex-grow: 1;
    }

    &:not(:disabled) {
      cursor: pointer;
    }

    &:disabled {
      cursor: not-allowed;

      .tdw__button__icon,
      .tdw__button__caption {
        opacity: 0.5;
      }
    }
  }
}

.-tdw-alert--error {
  color: red;
  border: 1px solid red;
  padding: 1rem
}