.folder {
  border: 1px solid $blue-alt;

  &.is-expanded {
    .expansion-indicator {
      transform: rotate(180deg);
    }
  }

  &.is-archived {
    .expansion-wrapper {
      pointer-events: none;

      &::after {
        display: none;
      }
    }
  }
}

.expansion-wrapper {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  padding-right: 5px;
  cursor: pointer;

  &::after {
    display: block;
    content: '';
    width: 1px;
    height: 15px;
    margin-left: 10px;
    background-color: $blue-alt;
  }
}

.expansion-indicator {
  transform: rotate(0deg);
  align-items: center;
  transition: transform 0.2s ease;
}

.header {
  display: flex;
  align-items: center;
  background-color: $blue;
  font-family: $primary-font;
  font-size: 15px;
  color: $white;
  transition: background-color 0.2s ease;
}

.header-icon {
  width: auto;
}

.header-label {
  flex: 1 1 auto;
  overflow: hidden;
  max-width: 250px;
  padding: 5px 5px 5px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.header-action {
  display: flex;
  align-items: center;
  padding: 5px;
  border: 0;
  background-color: transparent;
  outline: none;
}

.trades {
  padding: 0;
  border-top: 1px solid $blue-alt;
  margin: 0;
  list-style: none;

  &.is-reordering {
    overflow: hidden;
  }
}

.trade {
  display: flex;
  position: relative;
  align-items: center;
  border-bottom: 1px solid rgba($blue-alt, 0.4);
  background-color: transparent;
  transition: background-color 0.2s ease;

  &:global(.is-dragging) {
    z-index: 1;
    background-color: $blue-alt;
  }
}

.trade-link {
  @include gradient-hover($gold-alt);
  flex: 1 1 auto;
  padding: 6px 7px;
  font-family: $primary-font;
  color: $white;
  cursor: pointer;

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

.trade-link-completed {
  margin-right: 3px;
  font-size: 9px;
}

.trade-actions {
  display: flex;
  align-items: center;
  padding-right: 2px;
}

.trade-action {
  padding: 5px;
  border: 0;
  background-color: transparent;
  outline: none;
  color: rgba($white, 0.8);
  transition: color 0.2s ease;

  &:hover,
  &:focus {
    color: $white;
  }
}

.folder-actions {
  display: flex;
  align-items: center;
  width: calc(100% - 10px);
  margin: 5px;
}

.folder-actions-new-trade {
  flex: 1 1 auto;
}
