@use '../../../styles/mixins';

.ToDoListModal {
  .modal-dialog {
    max-width: 26.25rem;
    max-height: calc(100vh - 5rem);
  }

  .modal-content {
    min-height: 4.875rem;
  }

  .modal-header-condensed {
    margin-bottom: 1rem;
  }

  .readonly-title {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
  }

  .items-header {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;

    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
  }

  .items-count-hint {
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }

  .items-list {
    overflow: auto;
    overflow-y: scroll;

    max-height: 20rem;
    margin: 1rem -0.75rem -0.5rem;
    padding: 0 0.75rem;
    border-top: 1px solid var(--color-chat-hover);

    @include mixins.adapt-padding-to-scrollbar(0.75rem);

    @media (max-width: 600px) {
      overflow: hidden;
      max-height: none;
    }
  }

  .item-wrapper {
    position: relative;

    .form-control {
      padding-right: 3rem;
    }

    .item-remove-button {
      position: absolute;
      top: 0.125rem;
      right: 0.3125rem;
    }
  }

  .options-footer {
    margin-top: 1.5rem;

    .dialog-checkbox-group {
      margin: 0 -1.125rem;
    }

    .options-header {
      margin-bottom: 0.5rem;
    }
  }

  .input-group:last-child {
    margin-bottom: 0.5rem;
  }

  .radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.8125rem;
    margin-left: -1.125rem;

    .Radio, &:hover {
      background-color: transparent;
    }
  }

  .Checkbox,
  .Radio {
    .Checkbox-main,
    .Radio-main {
      width: 100%;
      max-height: 3rem;
    }
  }
}
