@import '../../common/styles/variables';

input{
  padding: 5px 0;
}
& {

  :host {
    font-family: 'Roboto', sans-serif;
  }

  @stickyHeight: 120px;
  @stickyHeightInlineDay: 340px;
  @stickyHeightInlineMonth: 280px;
  @stickyHeightInlineTime: 180px;
  @stickyHeightInlineDayTime: 420px;
  @menuWidth: 200px;

  .dp-demo-page {
    padding: 5px;
    margin-left: @menuWidth;
  }

  .dp-donate-btn {
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 3px;
    background: #f9fafb;
    border: 0;
    padding: 6px 12px;
    font-weight: bold;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.49);
    outline: none;
    color: #333333;
  }

  .dp-github-container {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .dp-menu {
    .dp-menu-header {
      padding-left: 10px;
      padding-bottom: 10px;
      color: @c-white;
    }

    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: @menuWidth;
    background: @demo-primary;
    z-index: 100;
    overflow: auto;

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        height: 50px;

        a {
          display: flex;
          height: 100%;
          align-items: center;
          padding-left: 10px;
          text-decoration: none;
          color: @c-white;

          &:hover, &.dp-active-item {
            background: darken(@demo-primary, 20%);
          }
        }
      }
    }
  }

  .dp-page-header {
    font-weight: 700;
  }

  .dp-demo-container {
    position: fixed;
    top: 0;
    left: @menuWidth;
    right: 0;
    height: @stickyHeight;
    text-align: center;
    background: lighten(@demo-primary, 50%);;
    z-index: 10;

    &.dp-not-top {
      box-shadow: 0 2px 6px 1px @c-light-gray;
    }

    &.dp-inline-day {
      height: @stickyHeightInlineDay;
    }

    &.dp-inline-month {
      height: @stickyHeightInlineMonth;
    }

    &.dp-inline-time {
      height: @stickyHeightInlineTime;
    }

    &.dp-inline-day-time {
      height: @stickyHeightInlineDayTime;
    }
  }

  .dp-inline {
    display: inline-block;
  }

  .dp-attributes, .dp-configs, .dp-api {
    width: 33%;
    display: inline-block;
    vertical-align: top;
  }

  .dp-option {
    padding: 10px;

    &:nth-child(odd) {
      background: fade(@c-light-gray, 30);
    }
  }

  .dp-week-days {
    input {
      width: 37px;
    }
  }

  .dp-page-content {
    margin-top: @stickyHeight;
    margin-bottom: @stickyHeight / 3;

    &.dp-inline-day {
      margin-top: @stickyHeightInlineDay;
    }

    &.dp-inline-month {
      margin-top: @stickyHeightInlineMonth;
    }

    &.dp-inline-time {
      margin-top: @stickyHeightInlineTime;
    }

    &.dp-inline-day-time {
      margin-top: @stickyHeightInlineDayTime;
    }
  }
  .code{
    position:fixed;
    left:200px;
    right:0;
    bottom:0;
    background: lighten(@demo-primary, 30%);
    color: #fff;
    padding:10px;
    text-align: center;
    z-index: 5;
  }

  .dp-place-holder {
    width: 1px;
    height: 1px;
  }
}
