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

& {

  dp-calendar-nav {
    @navHeight: 25px;

    .dp-calendar-nav-container {
      position: relative;
      box-sizing: border-box;
      height: @navHeight;
      border: 1px solid @c-black;
      border-bottom: none;
    }

    .dp-nav-date-btn {
      box-sizing: border-box;
      height: 25px;
      border: 1px solid @c-black;
      border-bottom: none;
    }

    .dp-nav-btns-container {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5px;
      display: inline-block;
      direction: ltr;
    }

    .dp-calendar-nav-container-left, .dp-calendar-nav-container-right {
      display: inline-block;
    }

    .dp-calendar-nav-left,
    .dp-calendar-nav-right,
    .dp-calendar-secondary-nav-left,
    .dp-calendar-secondary-nav-right {
      position: relative;
      width: 16px;
      cursor: pointer;
    }

    .dp-calendar-nav-left, .dp-calendar-nav-right {
      line-height: 0;
      .arrow(45deg);
    }

    .dp-calendar-secondary-nav-left, .dp-calendar-secondary-nav-right {
      .double-arrow(45deg);
      padding: 0;
    }

    .dp-calendar-secondary-nav-right {
      left: initial;
      right: 5px;
    }

    .dp-calendar-nav-left {
      .arrow(-135deg);
    }

    .dp-calendar-secondary-nav-left {
      .double-arrow(-135deg);
    }

    .dp-nav-header {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 5px;
      display: inline-block;
      font-size: 13px;
    }

    .dp-nav-header-btn {
      cursor: pointer;
    }

    .dp-current-location-btn {
      position: relative;
      top: -1px;
      height: 16px;
      width: 16px;
      vertical-align: middle;
      background: fade(@c-black, 60);
      border: 1px solid fade(@c-black, 60);
      outline: none;
      border-radius: 50%;
      box-shadow: inset 0 0 0 3px @c-white;
      cursor: pointer;

      &:hover {
        background: @c-black;
      }
    }

    &.dp-material {
      .dp-calendar-nav-container {
        height: @basic-height;
        border: 1px solid @c-light-gray;
      }

      .dp-calendar-nav-left,
      .dp-calendar-nav-right,
      .dp-calendar-secondary-nav-left,
      .dp-calendar-secondary-nav-right {
        border: none;
        background: @c-white;
        outline: none;
        font-size: 16px;
        padding: 0;
      }

      .dp-calendar-secondary-nav-left,
      .dp-calendar-secondary-nav-right {
        width: 20px;
      }

      .dp-nav-header-btn {
        height: 20px;
        width: 80px;
        border: none;
        background: @c-white;
        outline: none;

        &:hover {
          background: fade(@c-black, 5);
        }

        &:active {
          background: fade(@c-black, 10);
        }
      }
    }
  }
}