@import '../style/mixins/libs/line.scss';
@import '../styles/theme.scss';

.root {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  flex: 1;

  .action-filter {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: auto;
    flex: 1;
    padding: 0px #{$spacingUnit * 2}px;

    .option {
      padding-bottom: #{$spacingUnit * 1.5}px;
      padding-top: #{$spacingUnit * 1.5}px;

      &:not(:first-child) {
        border-top: 1px solid $paletteGrey200;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: #{$spacingUnit * 1.5}px;
        padding-top: #{$spacingUnit * 1.5}px;

        .tag,
        .spacing {
          flex: 1;
          min-width: 31%;
          max-width: 31%;
        }
        .tag {
          margin: #{$spacingUnit * 1.5}px 0px;
          @include line(1);
        }
      }
    }
  }
  .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .button {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;

      &.primary {
        background: $palettePrimaryMain;
      }
    }
  }
}