@import (reference) '../presentation/less/imports/commonImports.less';

.panel-default > .panel-heading {
  background-color: transparent;
  border-bottom: 0;
}

instance-archetype-selector,
v2-instance-archetype-selector,
v-2-instance-archetype-selector {
  .archetype-columns {
    display: inline-block;
    button {
      width: 100%;
    }
    h4 {
      min-height: 52px;
    }
    .panel-heading {
      padding: 0 0 0 0;
    }
    &.archetype-columns-3 {
      width: calc(~'33% - 40px');
      margin: 0 20px 20px;
    }
    &.archetype-columns-4 {
      width: calc(~'25% - 30px');
      margin: 0 15px 20px;
    }
    &.archetype-columns-5 {
      h4 {
        font-size: 16px;
      }
      width: calc(~'20% - 12px');
      margin: 0 5px 20px;
    }
  }
}

.instance-profile {
  vertical-align: top;
  text-align: left;
  min-height: 100px;
  font-size: 90%;
  border: 1px solid var(--color-silver);
  border-radius: 3px;
  color: var(--color-mineshaft);
  background-color: transparent;

  &:hover,
  &:focus {
    color: var(--color-mineshaft);
    text-decoration: none;
  }

  .selected-indicator {
    display: block;
    width: 100%;
    text-align: right;
    padding-right: 5px;
    font-size: 150%;
    color: var(--color-accent);

    &.custom {
      margin-top: 5px;
    }
  }

  h4 {
    margin-top: 0;
    text-align: center;
    word-spacing: 300px;
  }

  ul {
    font-size: 95%;
    padding-left: 20px;
  }
  .panel-heading {
    padding-top: 0;
    padding-bottom: 0;
  }
  &:hover,
  &:focus,
  &.active {
    outline: 0;
  }
  &.active {
    box-shadow: inset 0 0 3px 2px var(--color-accent);
    border-color: var(--color-accent);
  }
  &:hover,
  &:focus {
    box-shadow: 0 0 8px 2px var(--color-accent);
  }
}
.cost-factor {
  color: var(--color-alto);
  .cost {
    color: var(--color-mineshaft);
  }
}