/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Use this class to implement a button in the top menu bar.
 * This overrides most browser styles, for both links and buttons. */
/* stylelint-disable order/properties-order */
.menuButtonsButton {
  position: relative; /* This allows to absolutely position its children */
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 12px;
  border: 0;
  margin: 0;
  background: none;
  white-space: nowrap;

  /* Inherit some properties values from the environment, rather than using the
   * browser default for buttons or links. */
  color: inherit;
  font-size: inherit;

  /* These 2 styles are specific for links. */
  cursor: default;
  text-decoration: none;
}
/* stylelint-enable order/properties-order */

.menuButtonsButton:hover {
  background-color: rgb(0 0 0 / 0.1);
}

.buttonWithPanel.open > .menuButtonsButton,
.menuButtonsButton:hover:active {
  background-color: rgb(0 0 0 / 0.2);
}

/* Use this class if a button has an icon */
.menuButtonsButton-hasIcon::before {
  /* The icon size and width and height are defined as 12px so that we control
   * better their size.
   * Then it has 4px padding on the right side (because it's at the left of the
   * content), and the image is at the left of this space.
   * So here is the layout for this element:
   * <-left padding-> <-ICON (12px)-> <-4px-> CONTENT
   */
  width: 12px;
  height: 12px;
  padding-right: 4px;
  background: no-repeat left/12px;
  content: '';
}

/* position: relative so that we can use position: absolute for the generated
 * element below. */
.menuButtonsButton-hasRightBorder,
.menuButtonsButton-hasLeftBorder {
  position: relative;
}

/* These classes define respectively a right or a left border. We use ::after for
 * both of them, so one element won't be able to have both a right and a left
 * borders with this technique.
 * We're using ::after for borders because ::before is used for icons. */
.menuButtonsButton-hasRightBorder::after,
.menuButtonsButton-hasLeftBorder::after {
  position: absolute;
  top: 4px;
  width: 1px;
  height: calc(100% - 8px);
  background: var(--grey-30);
  content: '';
}

.menuButtonsButton-hasLeftBorder::after {
  left: 0;
}

.menuButtonsButton-hasRightBorder::after {
  right: 0;
}

/* This icon is defined as a separate element, so that it can possibly be reused
 * in other places. */
.open-in-new {
  /* The icon size and width and height are defined as 12px so that we control
   * better their size.
   * Then it has 4px padding on the left side (because it's at the right of the
   * content), and the image is at the right of this space.
   */
  width: 12px;
  height: 12px;
  padding-left: 4px;
  background: url(../../../../res/img/svg/open-in-new-12.svg) no-repeat right /
    12px;
}

/* These classes define respective states for the metainfo button. They change
 * the icon whose generic styles are defined above. */
.menuButtonsMetaInfoButtonButton::before {
  background-image: url(../../../../res/img/svg/info-12.svg);
}

/* This is the revert button, appearing after publishing a profile. */
.menuButtonsRevertButton::before {
  background-image: url(../../../../res/img/svg/undo-dark-12.svg);
}

.menuButtonsRevertToFullView::before {
  background-image: url(../../../../res/img/svg/maximize-dark-12.svg);
}

.profileInfoUploadedActions {
  padding: 8px 0 8px 40px; /* The 40px padding leaves the room for the cloud image */
  border-bottom: 1px solid rgb(0 0 0 / 0.05);
  font-size: 13px;
}

.profileInfoUploadedLabel {
  padding-right: 8px;
  color: var(--grey-50);
}

.profileInfoUploadedDate {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.profileInfoUploadedDate::before {
  position: absolute;
  left: -40px;
  display: block;
  width: 32px;
  height: 32px;
  background: url(../../../../res/img/svg/cloud-dark-12.svg) no-repeat left /
    32px;
  content: '';
  opacity: 0.5;
}

.profileInfoUploadedActionsButtons {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  gap: 8px;
}
