// Import all partials
@require './_*.styl'

header.top
  text-align center
  h1
    font-size 14.4rem
    line-height 0.7 // this font has a wacky baseline
    display flex
    justify-content: center;
    
    // This is a bunch of goofy CSS to make the logo look decent
    .ofThe
      display flex
      font-size 3rem
      color orange
      justify-content: center;
      align-items: center; 
      background url('images/anchor.svg') center no-repeat;
      background-size cover
      padding 0 1rem
      .of
        padding-right 2rem
        position relative
        right -0.5rem
  h3
    margin 0
    font-size 2rem
    color orange
    position relative
    display inline-block
    span
      background white
      position relative
      z-index 2
      padding-left 1rem
      padding-right 1rem
    &:before, &:after
      display block
      z-index 1
      background black
      position absolute
      width 130%
      height 1px
      content ''
      top 5px
      margin-left -15%
    &:after
      top auto
      bottom 7px
      
  
.catch-of-the-day
  display flex
  height 90vh
  max-width:1500px
  margin 0 auto
  margin-top 5vh
  perspective: 1000;
  transform-style preserve-3d
  & > *
    flex 1 4 auto
    padding 2rem
    border 1rem double lighten(black,10%)
    position relative
    background white
    transition all 0.3s
    box-shadow 0px 5px 5px rgba(0,0,0,0.1)
    overflow scroll
    &:first-child
      flex-shrink 1 // take 4x the extra room
      flex-basis 50%
      transform translateX(50%) rotateY(6deg) translateX(-50%)
    &:nth-child(2)
      transform translateX(-50%) rotateY(-14deg) translateX(50%)
      border-left 0 
      border-right 0 
      min-width 300px
    &:last-child
      flex-shrink 1 // take 4x the extra room
      flex-basis 50%
      transform translateX(-50%) rotateY(10deg) translateX(50%) scale(1.08) translateX(24px)

// Folding Transforms
// Take off folding when not checked
input#fold:not(:checked) ~ #main
  .catch-of-the-day > *
      transform none

label[for="fold"]
  position absolute
  top 1rem
  left 1rem
  text-transform uppercase
  font-size 1.3rem
  background black
  color white
  border 2px solid black
  cursor pointer
  padding 0.5rem 1rem

input#fold
  display none
  &:checked + label
    background white
    color black

ul
  list-style none
  margin 0
  padding 0

ul.order
  li
    border-bottom 1px solid black
    padding 2rem 0
    display flex
    font-size 1.4rem
    justify-content space-between
    align-items center
    &:hover
      // padding 1rem 0
      button
        display inline
    button
      border 0
      display none
      line-height 1
      padding 0 
    &.total
      font-weight 600
      border-bottom 3px solid black
      border-top 3px double black
    &.unavailable
      text-decoration line-through
      background lighten(red, 80%)
    .price
      font-size 1.2rem    
    span.count
      position relative
      overflow hidden
      float left // only works if it's floated?!
      span
        display inline-block
        // transition all 0.5s      

.order-title
  text-align center

.fish-edit
  margin-bottom 20px
  border 2px solid black
  overflow hidden
  display flex
  flex-wrap wrap
  input, textarea, select
    width 33.33%
    padding 10px
    line-height 1
    font-size 1.2rem
    border 0
    border-bottom 1px solid black
    border-right 1px solid black
    appearance none
    border-radius 0
    background white
    &:focus
      outline 0
      background lighten(orange, 85%)
  textarea
    width 100%
  input:last-of-type
    width 100%
  button
    width 100%
    border 0
    

// Menu Styles
.list-of-fish
  border-top 2px solid black
  border-bottom 1px solid black
  padding-top 5px
  margin-top 2rem
  transform translateZ(0);

.menu-fish
  border-bottom 2px solid black
  border-top 1px solid black
  padding-bottom 2rem
  padding-top 2rem
  margin-bottom 5px
  clear both
  overflow hidden
  p
    margin 0
    font-size 1.8rem
  .fish-name
    margin 0
    display flex
    justify-content space-between
    align-items center
  .price
    font-size 1.4rem
    // color orange
    justify-content flex-end
    // font-family 'Open Sans Condensed'
  img
    float left
    width 150px
    margin-right 1rem

button, input[type=submit]
  text-transform uppercase
  background none
  border 1px solid black
  font-weight 600
  font-size 1.5rem
  font-family 'Open Sans'
  transition all 0.2s
  position relative
  z-index 2
  &[disabled]
    color red
    background white
    border-color red
    transform rotate(-10deg) scale(2) translateX(50%) translateY(-50%)
    &:hover
      color red
      cursor not-allowed
    &:after
      display none
  &:after
    content ''
    z-index -1
    display block
    background black
    position absolute
    width 100%
    height 0%
    left 0 
    top 0
    transition all 0.2s 
  &:hover, &:focus
    color white
    outline 0
    &:after
      height 100%
  // variants
  &.warning
    &:after
      background red
  &.success
    &:after
      background green
  
  &.github, &.facebook, &.twitter
    border 0
    display block
    margin-bottom 2rem
    width 100%
    color white
    padding 2rem

  &.github
    background #82D465
    &:after
      background darken(#82D465, 20%)
      
  &.facebook
    background #3864A3
    &:after
      background darken(#3864A3, 20%)
      
  &.twitter
    background #5EA9DD
    &:after
      background darken(#5EA9DD, 20%)
      

// Store Selector
.store-selector
  background white
  max-width 500px
  margin 50px auto
  padding 2rem
  border 2px solid black
  input
    width 100%
    &[type="text"]
      text-align center
      font-size 3rem