@import url('../../bower_components/lesshat/build/lesshat.less');

@tabBg:            #eee;
@activeTab:           #939393;

@accentColor: #360e6b;

@bright: #fbfbfb;
@medium: #bcbcbc;
@dark: #3e3e3e;


// ### General

.jdfs-highlight,
.jdfs-highlight:hover {
  background: @accentColor;
  color: white;
}

.jdfs-fontstyle-other{
  display: none;
}
// ## Searchbar

.jdfs-main{
  width: 300px;
  height: 50px;
  position: relative;
  .display(inline-flex);

  *, *:after, *:before {
    box-sizing: border-box;
  }

  background: @bright;
}

.jdfs-search-indicator{
  height: 100%;
  margin: 0;
}

.jdfs-toggle{
  margin: 0;
}

.jdfs-font-name{
}

.jdfs-reset-search{
  color: @bright;
  margin: 0;
  right: 0;
  background: @medium;
}

.jdfs-toggle-search{
  cursor: text;
  margin: 0;
  background: transparent;
  border: none
}
.jdfs-toggle-search,.jdfs-search{
  .flex(2 1);
}
.jdfs-search {
  padding: 0 .5em;
}
// ## Window

.jdfs-window {
  background: @medium;
  width: 300px;
  top: 100%;

  left: 0;
  z-index: 3000;
  position: absolute;
  padding: .5em;
}

// #fontlist

.jdfs-fontlistcon {
  width: 100%;
}

.jdfs-fontlist {
  background: @bright;
  padding: 0;
  margin: 0;
  position: relative;
  color: @dark;

  li {
    .display(inline-flex);
    margin: 0;
    list-style-type: none;
    width: 100%;
  }
}

.jdfs-fontlist-font {

  .display(flex);
  .align-items(center);
  .justify-content(flex-start);
  padding-left: 15px;
  width: 100%;
  height: 35px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  input {
    display: none;
  }
}

.jdfs-fontlist-headline {
    background-color: @dark;
    color: @bright;
    padding: 1em 0 1em 15px;
}

.jdfs-fontlist-noresults{
  color: @medium;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  line-height: 0;
  height: 150px;
}

.jdfs-fontpagination {
  width: 100%;
  display: block;
  padding: .2em 0;
  margin: 0;
  bottom: 0;
}

// ## Footer
.jdfs-fontstyle-sansserif{
  font-family: sans-serif;
}
.jdfs-fontstyle-serif{
  font-family: serif;
}
.jdfs-fontstyle-display{
  font-family: fantasy;
}
.jdfs-fontstyle-handwriting{
  font-family: cursive;
}

.jdfs-footer-con{
  padding: .5em;
}
.jdfs-footer{
  padding: .5em .5em .5em .5em;
}

.jdfs-footer-tab-open,.jdfs-footer{
  background: #646464;
  color: @bright;
}

.jdfs-footer-tab-toggle{
  vertical-align: bottom;
  display: inline-block;
  padding: .5em 1em;
}

.jdfs-settings-headline{
  padding: 0;
  margin: .2em 0;
}