@include export-module('co-period-filter-layout') {
  .co-period-filter {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: flex-start;
    flex-shrink: 0;
    icon {
      height: 20px;
      width: 20px;
      [fill] {
        fill: $color-action;
      }
    }
    //.current-filter {
    //  color: $color-action;
    //}
    #period_filter_dropdown_template {
      overflow: hidden;
      display: block;
      width: 300px;
      border-radius: 5px;
      background: white;
      box-shadow: 1px 1px 10px 1px rgba(72,79,96,.25);
      .label {
        font-weight: bold;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 13px;
        padding: 0 10px;
      }
      .item {
        cursor: pointer;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 5px;
        padding: 10px;
        icon {
          height: 40px;
          width: 40px;
        }

        &:hover {
          background-color: #8faba6;
          color: white;
          .co-icon {
            [fill] {
              fill: white;
            }
          }
        }
      }
    }
  }
}


