@use '../../../../../style/globals';
@use '../../../../../style/colors';
@use '../../../../../style/layouts/expansion-panel';

.collection-view {
  .row.width-limited {
    max-width: 45em;
    margin: 0 auto;
    .button-group {
      margin-left: auto;
      margin-right: auto;
    }
  }
  h1.name-property {
    // override name-property styles
    text-align: center;
    margin: 0;
  }
  .buttons {
    margin-top: 48px !important;
  }
  .apply-button {
    display: flex;
    justify-content: center;
    margin: 0 0 20px !important;
  }
  .col.border-left {
    margin-left: 24px !important;
    padding-left: 24px;
    .dark & {
      border-left: 1px solid colors.border-color(dark);
    }
    .light & {
      border-left: 1px solid colors.border-color(light);
    }
  }
  .mat-expansion-panel {
    @include expansion-panel.expansion-panel(true);
    .mat-expansion-panel-header-title {
      text-transform: capitalize;
    }

    &.warn:not(.disabled) .mat-expansion-panel-header-title {
      color: colors.color(warn);
    }
  }
  .changes .col {
    // stix list doesn't like being in columns, so force column sizes to 50%
    // max-width: 40%;
    width: 0;
    // &:first-child { padding-right: 12px; }
    // top padding is 48 + 12 to skip search header of stix-list
    &.controls {
      padding: 60px 12px 0 12px;
      width: 64px;
    }

    box-sizing: border-box;
  }

  .icon-mirror {
    transform: rotate(180deg);
  }
  .loading-display {
    text-align: center;
  }

  .validation {
    max-width: 45em;
    margin: 0 auto;
    .save-buttons {
      margin-top: 16px;
      button + button {
        margin-left: 16px;
      }
    }
  }

  .content.collection-data {
    .download {
      height: auto;
      border-radius: 0px;
      min-width: unset;
      .mat-icon {
        margin: 0px;
      }
    }
    .copy-url {
      font-family: monospace;
      font-size: 14px;
      border-bottom: none !important;
      cursor: pointer;
      &:hover {
        color: colors.color(link);
      }
    }
    .url {
      display: block;
    }
    .notes {
      margin-top: 8px;
      label.mdc-label {
        padding: 0px !important;
      }
    }
  }
  .mdc-label {
    padding: 16px 0 !important;
  }
  .c-align {
    text-align: center;
  }
}
