/**
 * 02. Themes
 */

/**
 * 02. 01. Theme Dark
 */
.csf-theme-dark{

  .csf-header-inner{
    background-color: #050505;

    h1{
      color: #fff;

      small{
        color: #555;
      }
    }
  }

  .csf-expand-all{
    color: #999;
    background-color: #222;

    &:hover{
      color: #fff;
      background-color: #333;
    }
  }

  .csf-search{

    input{
      color: #fff;
      background-color: #222;
    }

    &:focus{
      background-color: #444;
    }

    &::-webkit-input-placeholder{
      color: #666;
    }
  }

  .csf-nav{

    ul{

      li{

        a{
          color: #999;
          background-color: #222;
          border-bottom: 1px solid #2f2f2f;

          &:hover{
            color: #fff;
          }
        }

        .csf-active{
          color: #fff;
          background-color: #111;

          &:after{
            content: " ";
            position: absolute;
            right: 0;
            top: 50%;
            height: 0;
            width: 0;
            pointer-events: none;
            border: solid transparent;
            border-right-color: #fff;
            border-width: 4px;
            margin-top: -4px;
          }
        }
      }

      ul{

        li{

          a{
            background-color: #191919;
            border-bottom: 1px solid #2f2f2f;
          }

          .csf-active{
            background-color: #101010;
          }
        }

        &:before{
          background-color: rgba(#222, 0.75);
        }
      }
    }

    > ul > li:last-child > a{
      border-bottom: none;
    }
  }

  .csf-nav-background{
    background-color: #222;
  }

  .csf-footer{
    color: #555;
    background-color: #050505;
  }
}

/**
 * 02. 02. Theme Light
 */
.csf-theme-light{

  .csf-container{
    border: 1px solid #ccd0d4;
    box-shadow: 0 0 15 rgba(0,0,0,0.04);
  }

  .csf-header-inner{
    border-bottom: 1px solid #ccd0d4;
    background-color: #f5f5f5;
    background: linear-gradient(#fefefe, #f5f5f5);

    h1{

      small{
        color: #999;
      }
    }
  }

  .csf-expand-all{
    color: #999;
    background-color: #eee;

    &:hover{
      color: #555;
    }
  }

  .csf-search{

    input{
      color: #555;
      background-color: #eee;

      &::-webkit-input-placeholder{
        color: #999;
      }
    }
  }

  .csf-nav{

    ul{

      li{

        a{
          color: #666;
          background-color: #f5f5f5;
          border-bottom: 1px solid #ccd0d4;

          &:hover{
            color: #222;
          }
        }

        .csf-active{
          color: #222;
          background-color: #fff;

          &:after{
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: -1px;
            width: 1px;
            background-color: #fff;
          }
        }
      }

      ul{

        li{

          a{
            background-color: #eee;
            border-bottom: 1px solid #ccd0d4;
          }
        }
      }
    }

    > ul > li:last-child > a{
      border-bottom: none;
    }
  }

  .csf-nav-background{
    background-color: #f5f5f5;
    border-right: 1px solid #ccd0d4;
  }

  .csf-footer{
    color: #555;
    border-top: 1px solid #ccd0d4;
    background-color: #f5f5f5;
    background: linear-gradient(#fafafa, #f5f5f5);
  }
}