/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/environment';

.item-group-container {
  background: $ic-color-light;
  padding-bottom: $ic-sp*6;
  border: 0;

  .item-group-condensed:last-child,
  .item-group-condensed:last-of-type,
  .item-group-condensed.last {
    border-bottom: 0;
  }

  .ig-list li {
    margin: 0;
  }
}

.item-group-condensed {
  padding: 9px;

  .ig-header {
    margin-top: 15px;
    background-color: $ic-bg-light-neutral;
    border: 1px solid $ic-border-light;
    padding: direction-sides($ic-sp $ic-sp/2); // match the ig-list and ig-row that appear below the header
    color: $ic-font-color-dark;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    .links {
      float: direction(right);
    }
  }

  .ig-row {
    border-top-width: 0;
    border-radius: 0;
    background: #fff;
    border-bottom: 1px solid $ic-border-light;
  }

  .ig-list li:first-child .ig-row,
  .ig-list li:first-of-type .ig-row,
  .first_visible .ig-row {
    border-top: 0;
    // &.ig-row-empty { border-top: 1px solid $ic-border-light; } // don't actually need the top border here
  }

  .ig-list li:last-child .ig-row,
  .ig-list li:last-of-type .ig-row,
  .last_visible .ig-row {
    &.ig-row-empty { border-bottom: 1px solid $ic-border-light; }
  }

  .item-group-expandable {
    background-color: $ic-color-light;
    border: 1px solid $ic-border-light;
    border-top: none;

    .ig-list {
      li { margin: 0; }
      li .ig-row {
        background: none;
        border: none;
        border-radius: 0;
      }

      li:last-child .ig-row,
      li:last-of-type .ig-row {
        box-shadow: none;
      }

      li:last-child .ig-sublist,
      li:last-of-type .ig-sublist {
        border-bottom: none;
      }
    }

    li:not(:last-child) .ig-sublist,
    li:not(:last-of-type) .ig-sublist{
      box-shadow: inset 0 1px 0 #f0f0f0, inset 0 -1px 0 #f0f0f0;
    }

    .ig-button {
      white-space: nowrap;
    }

    .ig-sublist {
      background-color: $ic-bg-light-neutral;
      box-shadow: inset 0 1px 0 #f0f0f0;
      border-top: 1px solid $ic-border-light;
      border-bottom: 1px solid $ic-border-light;

      ul {
        list-style:none;
        padding: 0;
        margin: 0;

        li:first-child,
        li:first-of-type {
          margin-top: 0px;
        }

        li:last-child .ig-row,
        li:last-of-type .ig-row {
          border-bottom: none;
        }

        li .ig-row {
          box-shadow: none;
          margin: 0;
          border-bottom: 1px dotted #e1e2e3;
          padding-top: $ic-sp/2;
          padding-bottom: $ic-sp/2;
          padding-#{direction(left)}: $ic-sp*2.5;
          .ig-title {
            color: $ic-font-color-dark;
          }
        }
      }
    }
  }
}
