/*

These are lifted piecemeal from the style guide (https://git-aws.internal.justin.tv/pages/web/styles)
and modified to work within the existing CSS of admin-panel

*/

$white: #FFFFFF;
$black: #000000;
$green: #14B866;
$red: #FC3636;
$orange: #FFB300;
$yellow: #FFEA00;

$twitch-purple-1: #0E0C1E;
$twitch-purple-2: #17141F;
$twitch-purple-3: #201C2B;
$twitch-purple-4: #2C2541;
$twitch-purple-5: #392E5C;
$twitch-purple-6: #4B367C;
$twitch-purple-7: #6441A4;
$twitch-purple-8: #7D5BBE;
$twitch-purple-9: #9A7FCC;
$twitch-purple-10: #B19DD8;
$twitch-purple-11: #C5B6E2;
$twitch-purple-12: #D7CCEB;
$twitch-purple-13: #E2DBF0;
$twitch-purple-14: #EEE9F6;
$twitch-purple-15: #F9F8FC;

$hinted-grey-5: #433F4A;
$hinted-grey-8: #898395;
$hinted-grey-11: #CBC8D0;
$hinted-grey-12: #DAD8DE;
$hinted-grey-13: #E5E3E8;
$hinted-grey-14: #EFEEF1;
$hinted-grey-15: #FAF9FA;

.disc-list {
  list-style-type: disc;
}

.warning {
  color: $red;
}

.brick {
  background-color: $hinted-grey-14;
  padding: 1rem;
  width: 100%;
  border-radius: 2px;
  border: 1px solid $hinted-grey-14;
}

.brick.heading {
  background-color: $hinted-grey-12;
  padding: 1rem 2rem;
  h4 {
    font-size: 16px;
    font-weight: 400;
  }
}

.brick--caution {
  box-shadow: 3px 0px 0px $twitch-purple-7 inset;
  padding-left: calc(1rem - 2px);
  color: $red;
  border-radius: 0px;
}

.brick--marked {
  box-shadow: 3px 0px 0px $twitch-purple-7 inset;
  padding-left: calc(1rem - 2px);
  border-radius: 0px;
  border: none;
}

.brick--pd-lg .brick__caption {
  padding-top: 2rem;
}

.form-inline, .form-horizontal {
  padding: 1rem;
}

a, a:hover {
  text-decoration: none;
}

.twitch-button {
  background-color: $twitch-purple-7;
  border: 0;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 3rem;
  padding: 0 1rem;
  margin: 0;
  position: relative;
  white-space: nowrap;
  transition: all .2s;

  &:hover:enabled, &:focus:enabled {
    color: white;
    cursor: pointer;
    text-decoration: none;
    background-color: $twitch-purple-8;
  }

  &:disabled {
    background-color: $twitch-purple-13;
  }
}

.twitch-button--disabled {
  background-color: $twitch-purple-13;
}

.button--alert {
  background-color: $red !important;
}

.button--alert:hover, .button--alert:focus {
  background-color: darken($red,7) !important;
  text-decoration: none;
}

.button--hollow {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(100,65,164,0.5);
  color: $twitch-purple-8;
}

.button--file {
  overflow: hidden;
}

.button__input-file {
  opacity: 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

ul {
  list-style-type: none;
}

.pagination>li:first-child a, .pagination>li:first-child span{
  border-radius: 0px;
}

.pagination>li:last-child a, .pagination>li:last-child span{
  border-radius: 0px;
}

.pagination li a {
  color: $hinted-grey-5;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}

.pagination > a:hover {
  color: $hinted-grey-15;
  background: $twitch-purple-3;
  text-decoration: none;
}

.pagination > a:hover, .pagination > .active > a{
  color: $twitch-purple-6 !important;
  background-color: rgba(100, 65, 164, 0.05) !important;
  border-color: #ddd !important;
}

.tabs {
  box-shadow: 0 0 0 1px $hinted-grey-12 inset;
  padding: 1rem;
  margin-bottom: 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.tabs__item > a {
  color: $twitch-purple-7;
  display: block;
  line-height: 2rem;
  font-size: 1.2rem;
  margin-bottom: 0.39599rem;
  padding-top: 0.60401rem;
}

.tabs__item:hover {
  box-shadow: 0 -1px 0 $twitch-purple-7 inset;
}

.tabs__item--active {
  box-shadow: 0 -1px 0 $twitch-purple-7 inset;
  a {
    color: $hinted-grey-5;
  }
}

.tabs__item {
  a {
    color: $twitch-purple-7;
    display: block;
    line-height: 2rem;
    font-size: 1.2rem;
    margin-bottom: 0.39599rem;
    padding-top: 0.60401rem;
  }
}

.tabs__item--active {
  box-shadow: 0 -1px 0 $twitch-purple-7 inset;

  a {
    color: $hinted-grey-5;
  }
}

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

.twitch-table {
  width: 100%;
  max-width: 100%;

  thead {
    background-color: $hinted-grey-14;

    th {
      padding: 2rem;
      border-bottom: 0;
    }

    th.left {
      box-shadow: 3px 0px 0px $twitch-purple-7 inset;
    }
  }

  td {
    padding-left: 2rem;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
  }

  tr:nth-child(even) {
    background-color: $hinted-grey-14;
  }
}

@media (min-width: 940px) {
  .tabs {
    box-shadow: 0 -1px 0 $hinted-grey-12 inset;
    flex-direction: row;
    padding: 0px;
  }

  .tabs__item {
    margin-right: 2rem;
  }
}

.sidebar {
  background-color: white !important;
  padding: 7px 0px 0px 0px!important;
}

/* WARP
   -----------------------------
   Warp is the tool that contains
   navigation options and other
   data that provides some form
   of action or navigation. */
.warp {
  background-color: $twitch-purple-2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.warp--light {
  background-color: white;
}

/* WARP SCROLL
   ---------------------------------
   Set area of scrollable to use flex grow
   We need to explicitly set the height for IE10 since the min-height from above
   throws it into I have no idea what to do with myself burn this whole nav
   to the ground mode. :fire:
  */
.warp__scroll {
  height: calc(100vh - 6.5rem);
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

/* WARP LIST
   ---------------------------------
   This is the main nav list which by
   default is a flex vertical list Use
   the warp--row modifier on .warp to
   force the nav to a row state on
   desktop view  */
.warp__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 1.4rem;
  width: 100%;
}

.warp__list--md {
  font-size: 1.2rem;
}

.warp__list--sm {
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.warp__list--sm .warp__item {
  width: 50%;
}

.warp__list--sm .warp__item a {
  color: $hinted-grey-8;
  padding: 0 2rem;
}

.warp__list--sm .warp__item--header {
  width: 100%;
}

/* WARP ITEM
   ---------------------------------
   Item of a Warp List. Displays based
   on whether or not it is within a row
   or a column. Affects its direct child
   as a padding container. Content should
   be INSIDE of that direct child. This
   allows all Warp Items to be properly
   aligned whether they are highlighted
   or underlined. */
.warp__item {
  color: $hinted-grey-11;
  margin: 0;
  padding: 0;
  position: relative;
}

.warp--light .warp__item {
  color: $hinted-grey-5;
}

.warp__item > span,
.warp__item > button,
.warp__item > a {
  padding: 0.5rem 2rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.closed .warp__item > span, .closed
.warp__item > button, .closed
.warp__item > a {
  padding: 1rem 1rem;
}

.warp__item a {
  color: $hinted-grey-12;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
}

.friend-list--search-results .warp__item a {
  cursor: default;
}

.warp--light .warp__item a {
  color: $hinted-grey-5;
}

.warp__item a:hover {
  color: $hinted-grey-15;
  background: $twitch-purple-3;
  text-decoration: none;
}

.warp--light .warp__item a:hover, .warp__item.active {
  color: $twitch-purple-6;
  background: rgba(100, 65, 164, 0.05);
}

/* WARP BUTTONS
  ---------------------------------
  Add friend and request accept/reject
  inline buttons.
  TODO: Refactor with warp__button
  */
.warp__action {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.warp__action svg {
  width: 1.2rem;
  height: 2.2rem;
}

.warp__action--primary {
  background: $twitch-purple-7;
}

.warp__action--primary svg path {
  fill: white;
}

.warp__action--primary:hover {
  background: $twitch-purple-5;
}

.warp__action--secondary svg path {
  fill: $hinted-grey-8;
}

.warp__action--secondary:hover svg path {
  fill: white;
}

.warp__action--secondary.disabled, .warp__action--secondary.disabled:hover {
  background: none;
  cursor: default;
}

.wrap__item--actions {
  width: 4.8rem;
}

/* COLLAPSED NAV
  ---------------------------------
  Collapsed Navigation Specific
  Stylings */
.closed .presence {
  position: absolute;
  left: 36px;
  top: 36px;
  box-shadow: 0 0 8px black;
}

.warp__item--toggled > a {
  box-shadow: 3px 0px 0px $twitch-purple-7 inset;
  background: $twitch-purple-3;
  color: $hinted-grey-15;
}

.warp--light .warp__item--toggled > a {
  background: rgba(100, 65, 164, 0.05);
}

.warp__item--toggled .warp__avatar svg {
  fill: $hinted-grey-13;
}

/* WARP SUBHEADER ITEM
   ---------------------------------
   Subheader item. Assumes contents are
   a title of a bunch of list items.
   Wrapped in a <dt>, part of a <dl>. */
.warp__item--header {
  color: $hinted-grey-11;
  font-size: 1.2rem;
  margin: 1.5rem 0 1rem;
  text-transform: uppercase;
}

.warp__item--header:before {
  content: '';
  position: absolute;
  background-color: $twitch-purple-4;
  height: 1px;
  bottom: 0;
  left: 2rem;
  right: 2rem;
}

.warp--light .warp__item--header > a:hover {
  background-color: none;
}

.warp--light .warp__item--header:before {
  background-color: $hinted-grey-13;
}

// GET UNIT VERTICAL - send in PX, REM or unitless
// Since we always want to use rems for our output in vertical space we use the guv() function to show where we are trying to achieve vertical rhytm and spacing. A simple unit type test checks for px, rem or unitless values. Although the rem and unitlesss functions might seem meaningless it will show consistency and frame of mind when looking through subsequent projects
@function guv($q: 1) {
  @if unit($q) == 'px' {
    @return px-to-rem($q);
  } @elseif unit($q) == 'rem' {
    @return $q;
  } @elseif unit($q) == '' {
    @return $q + 0rem;
  } @else {
    @warn ('You must send a rem, px, or unitless value to the guv function');
  }
}

// PROGRESS BARS
/////////////////////////////////

.progress-bar {
  background: $hinted-grey-12;
  height: guv(1);
  width: 100%;
}

.progress-bar__fill {
  background: $green;
  display: block;
  max-width: 100%;
  height: 100%;
}

// @TODO: update use more explicit pinning syntax. This is an old class that came from video_watched
.progress-bar-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}


// Sizes
///////////////////////////////////

.progress-bar--xs {
  height: guv(.3);
}

.progress-bar--sm {
  height: guv(.5);
}


// States
///////////////////////////////////

.progress-bar--error {
  background: $red;
  .progress-bar__fill {
    visibility: hidden;
  }
}

.progress-bar--caution {
  background: $orange;
  .progress-bar__fill {
    visibility: hidden;
  }
}


// Themes
///////////////////////////////////

.progress-bar--theme-purple {
  background: $twitch-purple-3;
  .progress-bar__fill {
    background: $twitch-purple-10;
  }
  .progress-bar__fill {
    min-width: 5% !important;
  }
}

// Countdown
///////////////////////////////////

.progress-bar--countdown {
  background: none;
  .progress-bar__fill {
    width: 100%;
    background: $twitch-purple-8;
    animation: progress-bar-countdown linear both;
  }
}

@keyframes progress-bar-countdown
  100%
    width: 0%
