@use '../../../../../../style/globals';
@use '../../../../../../style/colors';

.collection-index-view {
  .collection-section {
    &.description {
      padding: 16px 0;
    }
  }

  .version-list {
    .subscription-action {
      .dark & {
        border-bottom: 1px solid colors.border-color(dark);
      }
      .light & {
        border-bottom: 1px solid colors.border-color(light);
      }
    }
    .row {
      min-height: 48px;
    }
    .col {
      padding: 5px;
      justify-content: center;
      mat-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .clickable {
      cursor: pointer;
      &:hover {
        .dark & {
          background: colors.color-alternate(dark);
        }
        .light & {
          background: colors.color-alternate(light);
        }
      }
    }
  }

  .mat-expansion-panel {
    .dark &.mat-expanded {
      border: 1px solid colors.border-color(dark);
    }
    .light &.mat-expanded {
      border: 1px solid colors.border-color(light);
    }
    &:not(:first-child):not(.mat-expanded) {
      border-top-width: 0px;
    }
    &.mat-expanded + .mat-expansion-panel {
      border-top-width: 1px;
    }
    .mat-expansion-panel-header-title,
    .mat-expansion-panel-header-description {
      flex-basis: 0;
      align-items: center;
    }
    .mat-expansion-panel-header-description {
      justify-content: flex-start;
    }
  }
  .mat-mdc-list-item {
    cursor: unset;
    &.clickable {
      cursor: pointer;
      &:hover {
        .dark & {
          background: colors.color-alternate(dark);
        }
        .light & {
          background: colors.color-alternate(light);
        }
      }
    }
  }
  .remove-actions {
    padding-top: 20px;
  }
}
