@import '../../../../../../styles/core.scss';

.TutorialReferencePicker {
  background: get(color 'ivory');
  border-radius: 6px;
  flex: 1 1 auto;
  max-width: none;
  overflow-y: auto;

  @media (min-width: 1029px) {
    width: 339px;
  }

  @media (max-width: 1028px) and (min-width: 769px) {
    width: 239px;
  }

  @media (max-width: 768px) {
    max-width: calc(100vw - 101px);
  }

  &-Header {
    align-items: center;
    color: get(color 'shale');
    display: flex;

    &-BackArrow {
      align-items: center;
      display: inline-flex;
      font-size: 12px;
      height: 20px;
      opacity: 0.5;
      width: 22px;
    }
  }

  &-Item {
    align-items: center;
    display: flex;
    white-space: nowrap;

    &-Name {
      align-items: center;
      display: inline-flex;
      overflow: hidden;

      &-Method {
        flex: 0 0 auto;
        margin-right: 10px;
      }

      &-Text {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &-Check {
    color: get(color 'graphite');
    flex: 0 0 auto;
    font-size: 12px;
    margin-right: 10px;
    opacity: 0.25;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    &_selected {
      color: get(color 'green');
      opacity: 1;
    }
  }
}