:root {
  --table-borders: #ddd;
  --selected: rgb(131, 233, 207);
  --button-hover: #ecfbff;
}

.monthpicker {
  position: relative;
}

.monthpicker-container {
  box-shadow: 0px 0px 15px 0px #0000001f;
  background-color: white;
  position: absolute;
  border: solid 1px var(--table-borders);
  border-radius: 4px;
  padding: 20px;
  display: none;
  &.visible {
    display: block;
  }

  * {
    user-select: none;
  }

  .years {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;

    .promote {
      cursor: pointer;
      padding: 0 8px;
      border-radius: 2px;
      &:hover {
        background-color: var(--button-hover);
      }

      &.disabled,
      &.disabled:hover {
        background-color: unset;
        color: #b4b4b4;
        cursor: default;
      }
    }

    #mp-year {
      text-align: center;
    }
  }

  .months {
    display: grid;
    grid-template-columns: 40px 40px 40px;
    gap: 8px;
    div {
      display: grid;
      justify-content: center;
      cursor: pointer;
      border-radius: 2px;

      &:hover {
        background-color: var(--button-hover);
      }
      &.selected {
        background-color: var(--selected);
      }

      &.disabled,
      &.disabled:hover {
        background-color: unset;
        color: #b4b4b4;
        cursor: default;
      }
    }
  }
}