@import "ui-variables";

@snooze-bg-color: #f8f8f8;
@snooze-color: #808080;
@snooze-quickaction-img: "../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png";

.thread-list .list-item .list-column-HoverActions .action.action-snooze {
  background: url(@snooze-quickaction-img) center no-repeat, @background-gradient;
}

.snooze-popover {
  order: -104;

  .btn-toolbar:only-of-type {
    margin-right: 0;
  }
  .popover-pointer {
    background-color: @snooze-bg-color;
  }
  .popover-pointer.shadow {
    background-color: fade(@black, 22%);
  }
  .popover {
    overflow: hidden;
  }
}

// TODO this duplication should be removed when we switch to using a single
// popover implementation
.nylas-fixed-popover-container {
  .fixed-popover {
    overflow: hidden;
  }
  .fixed-popover-pointer {
    background-color: @snooze-bg-color;
  }
}

.snooze-container {
  color: @snooze-color;
  background-color: @snooze-bg-color;
  display: flex;
  flex-direction: column;

  .snooze-row {
    display: flex;

    .snooze-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      padding: 15px 0;
      cursor: default;
      width: 105px;
      line-height: initial;
      text-align: initial;

      &+.snooze-item {
        border-left: 1px solid @border-color-divider;
      }
    }
    &+.snooze-row {
      border-top: 1px solid @border-color-divider;
    }
  }

  .snooze-input {
    border-top: 1px solid @border-color-divider;
    padding: @padding-large-vertical @padding-large-horizontal;

    input {
      margin-bottom: 3px;
    }

    em {
      font-size: 0.9em;
      opacity: 0.62;
    }

  }
}