/* Effects Tab */
.effects-list {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    padding: 5px 0;

    .effect-source, .effect-duration {
      font-size: 0.8em;
      color: $c-grey;
    }
  }
}

.effects-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid $c-faint;
  
  .effects-title {
    font-weight: bold;
    margin: 0;
  }
}

.item-list {
  .effect {
    border-bottom: 1px solid $c-faint;
    margin-bottom: 5px;
    
    .item-image {
      flex: 0 0 24px;
      margin-right: 5px;
    }
    
    .effect-name {
      h4 {
        margin: 0;
      }
    }
    
    .effect-controls {
      display: flex;
      gap: 5px;
      
      .effect-control {
        color: $c-dark;
        
        &:hover {
          color: $c-primary;
        }
      }
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.effects .item {
  .effect-source,
  .effect-duration,
  .effect-controls {
    text-align: center;
    border-left: 1px solid #c9c7b8;
    border-right: 1px solid #c9c7b8;
    font-size: 12px;
  }

  .effect-controls {
    border: none;
  }
}
