/*
 * Copyright (C) 2018 - 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";

$headerHeight: 50px;
$rowHeight: 50px;
$graderColumnWidth: 156px;
$finalGradeColumnWidth: 176px;
$studentColumnWidth: 200px;
$headerBorderColor: rgb(199, 205, 209);

.ic-Layout-columns {
  display: flex;
}

.ic-Layout-contentMain {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

/* FocusableView */

.FocusableView {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    #{direction(left)}: -0.25rem;
    #{direction(right)}: -0.25rem;
    bottom: -0.25rem;
    border: 1px solid var(--ic-link-color);
    border-radius: $borderRadiusLarge;
    opacity: 0;
    transform: scale(0.01);
    transition: all 0.2s;
    pointer-events: none;
  }

  &:focus {
    outline: none;

    &::before {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* End FocusableView */

/* GradesGrid */

.GradesGrid {
  background: white;
  overflow-x: auto;
  // position: relative;

  &, * {
    box-sizing: border-box;
  }

  tr {
    white-space: nowrap;
  }

  th, td {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.GradesGrid__HeaderRow {
  border-bottom: 1px solid $headerBorderColor;
  height: $headerHeight;
  line-height: $headerHeight;
}

.GradesGrid__GraderHeader,
.GradesGrid__FinalGradeHeader {
  max-width: $graderColumnWidth;
  min-width: $graderColumnWidth;
  overflow: hidden;
  padding: 0 $ic-sp;
  text-align: direction(left);
  text-overflow: ellipsis;
}

.GradesGrid__GraderHeader {
  width: $graderColumnWidth;
}

.GradesGrid__FinalGradeHeader {
  max-width: $finalGradeColumnWidth;
  min-width: $finalGradeColumnWidth;
}

.GradesGrid__StudentColumnHeader {
  max-width: $studentColumnWidth;
  min-width: $studentColumnWidth;
  padding: 0 $ic-sp;
  text-align: direction(left);
  text-overflow: ellipsis;
}

.GradesGrid__BodyRow {
  height: $rowHeight;
  line-height: $rowHeight;
}

.GradesGrid__BodyRowHeader {
  font-weight: normal;
  padding: 0 $ic-sp;
  text-align: direction(left);
  width: $studentColumnWidth;
}

.GradesGrid__ProvisionalGradeCell {
  max-width: $graderColumnWidth;
  padding: 0;
  text-align: direction(left);
}

.GradesGrid__FinalGradeCell {
  max-width: $finalGradeColumnWidth;
  padding: direction-sides(0 0 0 $ic-sp);
  text-align: center;
}

/* End GradesGrid */
