@import 'colors';
@import 'fonts';
@import 'mixins';

#admin {

  .admin-table {
    @include sheet;
    @include shadow-light;
    width: 100%;

    td, th {
      padding: 0 16px;
      line-height: 42px;
      border-bottom: $border;
    }

    th {
      font-weight: bold;
    }

    tr:hover td, tr:hover th {
      background-color: #F3F3F3;
    }

    tr:last-child {
      th, td {
        border-bottom-color: transparent;
      }
    }
  }


  ul.admin-tracks,
  ul.admin-users {

    li {
      clear: both;
    }

    .excerpt {
      border-bottom: 2px solid $lightSeaBlue;
      margin-top: 10px;

      &:after {
        clear: left;
        content: '';
        display: block;
      }

      .name {
        display: block;
        float: left;
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
        font-family: $serif;
        transition: background .2s ease-in;

        &:hover {
          background-color: $lightSeaBlue;
          color: $white;
        }
      }

      span {
        display: block;
        margin: 5px;
        float: left;
        margin-left: 5px;
      }

      .label {
        margin-bottom: 2px;
      }
    }

    .detail {
      display: none;
      margin: 10px;

      &.open {
        display: block;
      }

      dl {
        font-size: 14px;
      }

      dt {
        color: $white;
        text-transform: uppercase;
        font-family: $thin;
      }
    }
  }
}