/*
 * Copyright (C) 2015 - 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/>.
 */

// Styles for Dashboard Card Component

@import "base/environment";
@import "components/ic-badge";


$ic-DashboardCard-width: 262px;
$ic-DashboardCard-icon-size: 24px;
$ic-DashboardCard-icon-color: $ic-icon-link-color;

// Optional parent container padding
.ic-DashboardCard__box {
  padding: $ic-sp 0.125rem 0;
}

.unpublished_courses_redesign .ic-DashboardCard__box {
  padding: $ic-sp $ic-sp*2;
}

.unpublished_courses_redesign .ic-DashboardCard__box__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid $ic-border-light;
  background: rgba($ic-color-light, 0.95);
  box-sizing: border-box;
  margin-bottom: $ic-sp*2;
  @include mobile-only {
    & { font-size: 1.5em };
  }
}

@supports (position: sticky) or (position: -webkit-sticky) {
  .ic-DashboardCard__box {
    padding-top: $ic-sp * 2;
  }
}

@keyframes placeholder {
  to { opacity: 0.5; }
}

.ic-DashboardCard__placeholder-svg {
  display: block;
  width: 100%;
  height: 100%;
  .ic-DashboardCard__placeholder-animates > * {
    fill: darken($ic-bg-light-neutral, 3%);
    animation-name: placeholder;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    @for $i from 2 through 7 {
      &:nth-child(#{$i}) {
       animation-delay: 0.1s * $i;
      }
    }
  }
}

.ic-DashboardCard {
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(black, 0.3);
  border-radius: 4px; // to keep consistency between dashboard cards and planner app
  overflow: hidden;
  background: $ic-color-light;
  width: $ic-DashboardCard-width;
  display: inline-block;
  vertical-align: top;
  margin: direction-sides(0 $ic-sp*3 $ic-sp*3 0);

  // if there is not enough screen width to fit 2 whole cards (like on a phone) then just have one card fill the whole width
  @media only screen and (max-width: $ic-DashboardCard-width*2 + $ic-sp*8) {
    & { width: 100%; }
    body.responsive_awareness & {
      margin-#{direction(right)}: 0;
    }
  }

  .no-touch & {
    &:hover { box-shadow: 0 4px 10px rgba(black, 0.35); }
  }
}

.ic-DashboardCard__header {
  position: relative; // positioning context for cog button
  cursor: pointer;
  box-sizing: border-box;
}

.ic-DashboardCard__header_hero {
  box-sizing: border-box;
  height: 146px;
  border: 1px solid rgba(black, 0.1);
}

.ic-DashboardCard__header_image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.ic-DashboardCard__header_content {
  box-sizing: border-box;
  padding: $ic-sp $ic-sp*1.5 0;
  background: $ic-color-light;
}

@mixin dashcardHeaderButton {
  position: absolute;
  top: $ic-sp; #{direction(right)}: $ic-sp;
  width: $ic-sp*3;
  height: $ic-sp*3;
  border-radius: 50%;
}

.ic-DashboardCard__header-button {
  @include dashcardHeaderButton;
  @include overwrite-default-icon-size($ic-DashboardCard-icon-size);
}

.ic-DashboardCard__header-button-bg {
  @include dashcardHeaderButton;
}

.ic-DashboardCard__header-publish {
  position: absolute;
  top: $ic-sp;
  #{direction(left)}: $ic-sp;
  height: $ic-sp*3;
}

.ic-DashboardCard_settings_icon {
  color: white;
  opacity: 0.6;
}

.ic-DashboardCard__header-title {
  transition: all 0.2s ease-out;
  transform: translate3d(0,0,0);
  padding: 0;
  margin: 0;
  line-height: 1.3;
  font-size: calculateRem($baseFontSize);
  font-weight: bold;
}

.ic-DashboardCard__header-subtitle {
  line-height: 1.3;
  padding: 0;
  margin-top: $ic-sp/3;
}

.ic-DashboardCard__header-term {
  line-height: 1.3;
  font-size: $baseFontSize - 2;
  height: 1rem;
}

@if $use_high_contrast == false {
  .ic-DashboardCard__header-subtitle,
  .ic-DashboardCard__header-term {
    color: $ic-icon-link-color;
  }
}

.ic-DashboardCard__action-layout {
  position: relative;
  font-size: $ic-DashboardCard-icon-size
}

.ic-DashboardCard__action-badge {
  @include ic-badge-maker(18px, var(--ic-brand-primary), $ic-color-light);
  transition: all 0.2s;
  position: absolute;
  top: -0.5rem; #{direction(right)}: -0.875rem;
  z-index: 1; // when dashcard links get squished, don't cut off badges
}

.ic-DashboardCard__action-container {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 0 0 $ic-sp;
  margin-top: $ic-sp * 0.75;
  height: 2.5rem; // maintain nav height when there are no action links
}

.ic-DashboardCard__action {
  transition: color 0.2s;
  box-sizing: border-box;
  color: $ic-DashboardCard-icon-color;
  flex: 0 0 25%;
  display: flex;
  justify-content: center;
  @include overwrite-default-icon-size($ic-DashboardCard-icon-size);

  .no-touch & {
    &:hover { color: var(--ic-brand-primary); }
  }

  // the focus outline on the svg is broken in safari
  // and on the <a> is broken in firefox
  // ff is the only one I can single out
  .no-touch:not(.ff) & {
    &:focus {
      outline-style: solid;
      outline-width: 1px;
      outline-offset: -1px;
    }
  }
  .no-touch.ff & {
    &:focus {
      outline: none;
      svg, i {
        outline-offset: .25rem;
        outline-style: solid;
        outline-width: 1px;
      }
    }
    &:hover { color: var(--ic-brand-primary); }
  }
}

.DashboardCardMenu__ColorPicker {
  padding-#{direction(left)}: 8px;
}

.DashboardCardMenu__MovementItem {
  display: flex;
  align-items: center;
}

.DashboardCardMenu__MovementIcon {
  margin-#{direction(right)}: $ic-sp;
  font-size: $ic-font-size--large;
}
