@use "../colors" as c;
@use "../mixins" as m;

.visualizer-course-objectives {
  display: inline-block;
  height: 1rem;
  width: 1rem;

  .with-hours {
    p {
      margin-top: 0.5rem;
    }

    .meh {
      @include m.font-size("huge");
    }
  }

  .zero-hours {
    p {
      margin-top: 0.5rem;
    }

    h4 {
      @include m.ilios-heading-h4;
    }

    li {
      list-style-type: disc;
      margin-left: 1rem;
      padding-bottom: 0.5rem;

      p {
        margin: 0;
      }
    }
  }

  .data-table {
    grid-column: -1/1;
    padding-top: 2rem;

    table {
      @include m.ilios-table-structure;
      @include m.ilios-table-colors;
      @include m.ilios-removable-table;
      @include m.ilios-zebra-table;

      thead {
        background-color: c.$culturedGrey;
      }

      td {
        vertical-align: top;
      }

      .objective {
        p {
          margin: 0;
        }
      }
    }
  }

  &.not-icon {
    display: grid;
    grid-template-columns: 2fr 1fr;
    height: auto;
    width: auto;

    .simple-chart {
      height: 80vh;
    }

    .simple-chart-tooltip {
      .title {
        p {
          margin: 0;
          padding: 0;
        }
      }
    }
  }
}
